beginGradientFill not working on HTML5 targets

#1 
_colours = [0x000000, 0x000000];
_alphas = [0, 1];
_ratios = [0, 0xFF];
_matrix = new Matrix();

_matrix.createGradientBox(_holeRadius, _holeRadius, 0, _holeX - _holeRadius/2, _holeY - _holeRadius/2);
graphics.clear();
graphics.beginGradientFill(GradientType.RADIAL, _colours, _alphas, _ratios, _matrix);
graphics.drawRect(0,0,1920,1080);
graphics.endFill();

This is my code to generate a hole in a pure black square. The radius and the position of the hole come from an external data file. The hole has an alpha gradient and is used to create some sort of illumination, however I can’t seem to get it working on HTML5 targets even though they run perfectly on native targets.

Has anyone had this kind of problem?

BlendMode.ALPHA gets really slow
#2

I think gradients have not been added to the HTML5 canvas renderer, though it looks like it should be possible:

http://www.w3schools.com/tags/canvas_createlineargradient.asp

This sounds like a //TODO

1 Like
#3

@singmajesty, if it is a //TODO then I would like to contribute. Are there any guidelines on how to contribute to the OpenFL project?

#4

Just ask any questions you like :smile:

You can find the source at https://github.com/openfl/openfl, and the graphics drawing would be a combination of https://github.com/openfl/openfl/blob/master/openfl/display/Graphics.hx and https://github.com/openfl/openfl/blob/master/openfl/_internal/renderer/canvas/CanvasGraphics.hx for canvas