[HTML5, canvas] GlowFilter Glitch


#1

Hi,
I am trying to apply a GlowFilter to an animated bar.

The code is pretty simple

var blueLine: Sprite = new Sprite();
blueLine.graphics.beginFill(0x00e7ff, 1);
blueLine.graphics.drawRect(0, 0, 688, 15);
blueLine.graphics.endFill();
addChild(blueLine);
blueLine.filters = [new GlowFilter(0xffffff, 1, 25, 25, 5, 1)];

blueLine.width = 0;
Actuate.tween(blueLine, 0.25, {width: 229});

If I apply the filter to the static bar the result is ok (even if there are the old problems with quality parameter, > 3 makes it explode), but with the tween the result is an animated glitch, below you can see a few frames of the animation.

glowGlitch1

glowGlitch2

glowGlitch3

This happens with CANVAS.

With WebGL it seems to work ok:

glowNoGlitch

Lime 7.1.1 + Openfl 8.6.4


#2

I think this might have fixed it on dev: https://github.com/openfl/openfl/pull/2065


#3

I have switched to WebGL for this project for now, but will give a try to Canvas again as soon as the dev fixes will become official.