LINQPad HTML Canvas Control?

sdflysha

I just wondering is that also possible in LINQPad so that I can write a real-time 2D GAME in LINQPad by html canvas via getContext("2d") and then call requestAnimateFrame?

JoeAlbahari

This isn't easy right now, unless you intend to do the whole thing inside the browser by emitting JavaScript.

To make it possible to interact with the canvas from a LINQPad script, I can create a Canvas HTML control easily enough in the next build. However, bear in mind that you won't get good performance because every call has to cross a process boundary, and the rendering engine is currently stuck at IE11.

sdflysha

Thank you. I'm trying to do the same thing in LINQPad, but I cannot get the CanvasRenderingContext2D by this code:

var canvas = new Control("canvas");
canvas.Dump();

canvas.HtmlElement.InvokeMethod("getContext", "2d").Dump();

It reported null when I call getContext("2d")

IE 11 is not a issue here, it should supports HTML 5 canvas.

Although it may not get a great performance since cross-process communication, but I think it's a path to a new world.

JoeAlbahari

That's why it needs a new build

The getContext method returns an object which must be proxied across the process boundary rather than being serialized. It's not hard for me to implement because I already have a remoting framework in LINQPad.

I've just uploaded a new beta with this capability. There are also new Canvas and Svg controls to make the process easier. Create a Canvas and Svg and press F1 on the type for a demo. Let me know how you get along.

sdflysha

Thanks you a lot, it works:

var canvas = new Canvas(360, 240).Dump();
var ctx = canvas.GetContext2D();
ctx.fillStyle = "cornflowerBlue";
ctx.fillRect(0, 0, canvas.Width, canvas.Height);

ctx.fillStyle = "yellow";
ctx.font = "36px Consolas";
ctx.fillText("Hello 💕😁❤😂😎😊", 0, 30);

But seems it's does not looks very handy, wondering is there any solution that I can convert the dynamic object into something like a interface that support intellisence in LINQPad?

public interface CanvasRenderingContext2D
{
	string fillStyle { get; set;}
	void fillRect(double x, double y, double width, double height);
    // .......
}

sdflysha

Also I'm wondering if you can also export the other API: requestAnimationFrame
Document here:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

That would be greatly benifit for me

JoeAlbahari

You can probably do an interface cast with a library like this:
https://github.com/ekonbenefits/impromptu-interface

Is there any reason that you don't want to use WPF for animation? It will be hundreds of times faster. All you need to do is create the WPF control and dump it.

sdflysha

Thanks, impromptu-interface is what I want here. I'm just curios, nothing serious here, just for fun . But if we really want to create a canvas toy, we need the requestAnimationFrame It's the key to new world.

I'm using SharpDX to do real-time rendering, and I created a nuget package(with linqpad-samples) here: FlysEngine and FlysEngine.Desktop, which based on SharpDX/Direct2D. Which can be downloaded here: https://www.nuget.org/packages?q=FlysEngine