Home

LINQPad HTML Canvas Control?

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?

Comments

  • 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.
  • edited December 2018
    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.
  • edited December 2018
    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.
  • edited December 2018
    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);
    // .......
    }
  • 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 :)
  • 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.
  • edited December 2018
    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
Sign In or Register to comment.