Wasm Canvas api

Hello, how can I access Html APIs via webassembly, is it possible? I’d like to try to use the canvas api like I would in javascript. Right now I’ve got :

public class Program {
    public func HelloWorld() {
        var canvas = Browser.GetElementById("canvas")
    }
}

I can get the canvas element without any problems, but how can I get context out? In javascript I could do this:

var canvas  = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.fillStyle = "red"
context.fillRect(0,0, 50,50)

how can I do the same in Fire using swift and webassembly? Thank you for your time

Phill,

Once you have a javascript object, such as ‘canvas’, that’s a dynamic type, and you can call any method you like on it, and the call will get translated to a JS call at runtime.

So just

public class Program {
    public func HelloWorld() {
        var canvas = Browser.GetElementById("canvas")
        var context = canvas.getContext("2d")
        context.fillStyle = "red"
        context.fillRect(0,0, 50,50)
    }
}

should work.

Hello Marc,

thanks for your reply. This does not work as expected, it will not build. I get a build fail with an error on the line

context.fillStyle = "red"

the error says: Variable expected

Curious. but getContext() compiles? If so, that sounds like a bug, with dynamic only allowing method calls but not property access, possibly related to Swift. in oxygene, this compiles ok for me:

namespace Module26;

type
  [Export]
  Program = public class
  public
  
    method HelloWorld;
    begin
      writeLn('HelloWorld');
      var el := Browser.GetElementById('helloWorld');
      if el = nil then begin
        writeLn('Element by ID test is null!');
        exit;        
      end;
      var canvas := Browser.GetElementById("canvas");
      var context := canvas.getContext("2d");
      context.fillStyle := "red";
      context.fillRect(0,0, 50,50);
      var t2 := Browser.CreateTextNode('Hello from Elements WebAssembly!');
      el.appendChild(t2);
    end;
    
  end;

end.

But I can confirm it fails, for Swift. will log.

Thanks, logged as bugs://83734

yes, getContext(“2d”) compiles no problem.

Thanks for taking a look and logging this issue!

Should probably a quick fix, come Monday, when the compiler team is back. In the mean time, is using Oxygene instead of Swift an acceptable option?

I can wait for a fix without any problems. I just wanted to test out the wasm capabilities for future projects, and I’m not as familiar with Pascal :slight_smile:

I’ll be happy to wait, and thanks again for your help, I’m excited about the Elements project!

1 Like

bugs://83734 got closed with status fixed.

I’ve uploaded a new build with this fix to https://www.remobjects.com/portal/downloads/personal for you.

yours,
marc

Wow, super amazing thank you so much marc! This download appear to be Water, is there any chance you could send me Fire since I’m working on Mac?

regards and thanks!

Ah, sure thing; I’ll start a new build that has what you’ll need, should take about an hour.

Up now. See https://docs.elementscompiler.com/Fire/Setup/Mac/ExternalCompiler/ for instructions on ho to use the external compiler with Fire.

1 Like

I’m facing the exact same problem. Is it possible to get the build, where the problem was fixed? I’m on water.

Build .2475 is out now, as public/stable release and should have the fix. Our weekly preview builds would also have ad this fix for the past two weeks now.

Excellent. I worked perfectly :slight_smile:

1 Like