Canvas Mode: RenderTexture "fill" method does not set "globalCompositeOperation"

[mateuszkmiecik]

Version

• Phaser Version: 3.55, 3.60.0-beta
• Operating system: Windows, macOS
• Browser: Chrome, Firefox
• Phaser Rendering Mode: CANVAS

Description

Using fill method in RenderTexture does not set CanvasRenderingContext2D.globalCompositeOperation, resulting in reusing value set by last drawn gameObject.

rt.fill(0x0000ff);
rt.erase(...);
rt.draw(...);
console.log(rt.context.globalCompositeOperation); // "source-over"
rt.fill(0x0000ff);

acts as expected, resulting in filling RenderTexture with color.

Reversing order of draw end erase methods, causes fill to remove pixels from whole RenderTexture.

rt.fill(0x0000ff);
rt.draw(...);
rt.erase(...);
console.log(rt.context.globalCompositeOperation); // "destination-out"
rt.fill(0x0000ff);

Example Test Code

https://codepen.io/mkchomik/pen/QWQaxbz

Additional Information

Digging in the codebase, I found that value of globalCompositeOperation is set in SetTransform function:
https://github.com/photonstorm/phaser/blob/master/src/renderer/canvas/utils/SetTransform.js#L47

I was thinking if doing ctx.save() right before setting blendMode and globalAlpha would help, however I am not sure if it doesn't break other parts of code.

[mohsen159]

wow you see this

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.