CSS shadowBlur?

Help
#1

If I compile my project using -Dcanvas key, can I apply css shadowBlur property on a sprite? like here:
https://www.w3schools.com/tags/canvas_shadowblur.asp

How would I do so??

Thanks

#2

I think that would be possible using a custom render event

This seems sort of hacky but maybe something like this:

var before = new Sprite();
before.addEventListener(RenderEvent.RENDER_CANVAS, function(renderer)
{
    var ctx = renderer.context;
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
});
addChild(before);
addChild(objectThatShouldHaveBlur);
var after = new Sprite();
after.addEventListener(RenderEvent.RENDER_CANVAS, function(renderer)
{
    var ctx = renderer.context;
    ctx.shadowBlur = 0;
});
#3

Thanks, so what are all properties supported for renderer.context ?

#4

canvasRenderer.context is the CanvasRenderingContext2D of the final stage canvas being exposed directly

#5

I tried to access the sprite context as:

child.addEventListener(RenderEvent.RENDER_CANVAS, function(event)
		{
			var renderer:openfl.display.DisplayObjectRenderer = event.renderer;			
			var ctx:CanvasRenderingContext2D = renderer.context;
			ctx.shadowBlur = 20;
			ctx.shadowColor = "black";
		});

However, I am getting error:

openfl.display.DisplayObjectRenderer has no field context

how would I access the sprite’s CanvasRenderingContext2D ?

#6

Ok, I have solved it as:

var renderer:openfl.display.CanvasRenderer = cast(event.renderer);

but I’ve noticed that shadowBlur was applied on all sprites, although I only added the event listener to a particular child, why is that?

#7

The canvas render context is static so the value needs to be cleared after you are done applying it to the object, that’s why my “kind of hacky” example had two render callbacks to try and clear it

#8

Thanks, but when is the right time to clear it? is there a specific event to clear at?

#9

Immediately after rendering that object I would think