Canvas Disappears When Animating "source-in" Globalcompositeoperation Mask

I'm using 'source-in' compositing gradient mask on a canvas and I want to animate the stretching of the mask shape & gradient. Here's the compositing code, a function called dr

Solution 1:

When setting canvas context states such as globalAlpha, globalCompositeOperation, clip, etc... these states remain active and can affect the rest of your rendering. One way to solve this is to set all the states again after you have used them. This can end up in a lot of extra code so the 2Dcontext API provides two handy functions to control the state. ctx.save() and ctx.restore()

ctx.save() pushes the current state to a stack. ctx.restore() pops the last saved state and sets the canvas context to that state. You can nest saves, but remember to match each save with a restore.

For more info see ctx.save() at MDN

A word of warning. Saving and restoring states should be avoided if you are after high performance rendering for realtime games and interfaces. State changes can be a stall point when rendering, or just replicate unneeded state changes. Restoring a state may force the GPU to reload from CPU memory a bitmap used by ctx.createPattern() in a previously saved state, even if you are not intending to use it. This can be very slow and have a major performance hit on your frame rate, especially if you keep restoring to that unused pattern.