Access sprites in Canvas? - html5-canvas

Question

Targeting HTML5 in OpenFL is easy, however, I could not add glowing effects to sprites, I am thinking of a work around, that is using JavaScript library to add webGL effects to the sprites in Canvas.
But, the question is, how would I access the sprites inCanvas using JavaScript? and what tool to use to inspect sprites in Canvas ?

Answer 1

First of, since version 4.0 openfl uses webgl renderer by default and adding glow effect in that case requires a 'deep dive' into openfl/lime source code and i can't give you that.
But if that's suitable for you, force openfl to use canvas fallback with
<haxedef name="canvas"/>
and then you can create custom Bitmap class (for example) with glow effect like so
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.PixelSnapping;
import openfl._internal.renderer.cairo.CairoBitmap;
import openfl._internal.renderer.canvas.CanvasBitmap;
import openfl._internal.renderer.dom.DOMBitmap;
import openfl._internal.renderer.opengl.GLBitmap;
import openfl._internal.renderer.RenderSession;
class HackyBitmap extends Bitmap
{
/**
* Custom property for tweening
*/
public var glowBlur:Float = 0.0;
public function new(bitmapData:BitmapData=null, pixelSnapping:PixelSnapping=null, smoothing:Bool=false)
{
super(bitmapData, pixelSnapping, smoothing);
}
public override function __renderCanvas (renderSession:RenderSession):Void {
var context = renderSession.context;
if (glowBlur > 0)
{
context.save();
context.shadowBlur = glowBlur;
context.shadowColor = "white";
}
CanvasBitmap.render (this, renderSession);
if (glowBlur > 0)
{
context.restore();
}
}
}
Usage
var data = Assets.getBitmapData("img/berry.png");
var hacky = new HackyBitmap(data);
hacky.x = hacky.y = 20;
addChild(hacky);
//to animate glow property
Actuate.tween(hacky, 1.0, { glowBlur: 50 }).repeat().reflect();
OpenFL/Lime versions
lime 3.2.0
openfl 4.2.0
How it looks

Answer 2

As said in my comment, Sprites don't exist in JS/HTML, it's an abstraction on top of Canvas that ends up calling .drawImage, thus, you won't find it in any browser developer tools. The only way you can 'access' these sprites is just by using what OpenFL provides - your sprite objects, BitmapData, etc.
The method you tried to get a glow was probably through the GlowFilter class, which is wrongly described as 'Avaliable on all platforms' in the docs. This class isn't implemented with the Canvas element yet, but could have been.
However, WebGL exists for OpenFL, it isn't all canvas. That's why shaders are possible. There is a sort of glow filter for webgl, inbuilt into openfl, first shown in this commit of this pull request. So using shaders might be your best bet.
Unfortunatly, shaders don't work with Canvas. I feel like doing glows in canvas would be your best approach, but it's not yet implemented.