I am anything but a JavaScript expert, and looking at all these examples that I find everybody wants to save to local file. This is the case here, here and in various other places. However what I want to achieve is to have the image ready for display through a sprite. The most helpful resource is the Mozilla Canvas tutorial, which made me write this:
//-- this stuff will run as one-off
const radius = 20; // radius to unfog for the player
var mapCanvas = document.createElement('canvas');
var fogCanvas = document.createElement('canvas');
const renderer = runtimeScene.getRenderer();
const levelCanvas = renderer._pixiRenderer.view; // we have the rendered level now
//-- this stuff will run during update
// fog of war gets intense every step
var ctx = fogCanvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; // almost transparent black ink
ctx.fill();
// player can see vicinity, so punch a hole into fog
ctx.fillStyle = 'rgba(0, 0, 0, 0)'; // fully transparent black ink
ctx.arc(Player.X(), Player.Y(), radius, 0, 2*Math.PI)
ctx.fill()
// assemble the map for rendering
var ctx = mapCanvas.getContext('2d');
ctx.drawImage(levelCanvas, 0, 0);
ctx.drawImage(fogCanvas, 0, 0);
// mapCanvas contains our fogged level map. How to push this into the level sprite?
I’d expect to have the map ready to draw in mapCanvas. But how would I inject that into a Sprite? Or how else could this be rendered in GDevelop?