[CCLA][patch] Gradient not rendered for shapes contained in a Group using canvas renderer

[Patrick Ruzand]

This issue only happens under Chrome 8.0 or Android.

A gradient fill of a shape that is embedded inside a Group is not rendered. The problem comes both from the Group._render() implementation of the canvas renderer and a bug in Chrome.

1/ On the Group._render impl. side, it calls _renderStroke() and _renderFill(). Since no fill style is defined for a Group, group._renderFill() will set a fully transparent fill. Then, when the group child is rendered, a new fill style is set (in the example, a gradient).

at this time, we have two successive context.fillStyle = .... calls, which...

2/... yields to the following Chrome bug (fixed in the Chrome dev channel): setting fillStyle twice under Chrome 8/Android is buggy. If you first set the fill style to a color with an alpha and then set a fillStyle to a gradient, the gradient is rendered with the alpha. In the given exemple, calling group.renderFill will result to setting the fillStyle to rgba(0,0,0,0) (fully transparent) so next gradient is not rendered.

Proposed fix: since the fill and stroke properties are ignored by Group (as stated in the gfx doc), the Group._render implementation should not call renderStoke nor renderFill for a Group. Instead, it should only render the group transform and then render the group children.

[Patrick Ruzand]

canvas.js patch

[Patrick Ruzand]

test

[Eugene Lazutkin]

(In [23683]) gfx: fixed gradient group bug, thx Patrick Ruzand (IBM, CCLA)!, !strict, fixes #12214.