WebGL has off-screen rendering capabilities. At the end it is enough to rewrite this image on a canvas ( OffscreenCanvas ) .
I tried to pass the canvas to the "new Matter.Rander(...)" object as you showed - but it doesn't work. The graphics engine does not draw.
In September, when "Jam#3" was released, I discovered that the "setRGB" function draws very slowly. I could draw 600 circles at 60 FPS. I thought that changing to the "setRGB" function which puts only 1 pixel will improve the performance.
But it turned out differently - the performance was worse. I lost 45 frames drawing only 600 pixels at 15 FPS.
I looked at the code - there was nothing that could slow down the program.
I only guessed that "getImageData" and "putImageData" must be slowing it down. In the internet I also found information that these functions are slow because they exchange a lot of information between the card memory and the system memory.
I wrote a function that retrieves data once ( rgbBeginUpdate ) and writes to the graphics card once ( rgbEndUpdate ) and a function that sets pixels ( setRGBFast ) .
It worked - now 600 pixels are put at 60 FPS.
I moved this code to the "msimage.js" file.
I wanted to share this code but here the problems start.
To use my routines you have to write them into a file yourself or download a fork with this github code.
I thought that no one will do it because it's too much trouble (you have to download "node" and set up a server).
That was until I looked at the code from the 'Neural Network' library.
I tried moving the entire "msimage.js" file inside the project (with my extra functions).
It worked - the objects are created, they have fields, and I can call their methods.
One function, however, does not work - when I want to redraw the contents of the object to the screen, there are no visible effects.
See code >>> https://microstudio.io/i/Loginus/inject/ .
I'm guessing there's something wrong with the canvas.
If this code worked, you could easily share libraries that work on the MicroScript level and you wouldn't have to fork the code on github.
I added PicoGL ( picogl.min.js ) to the project in the same way - I have no idea how to transfer the image from this library to the "Image" object.
Link to the code >> https://microstudio.io/i/Loginus/webgl/