Html Canvas Freezing Over Animation

I'm looking at using this plugin. In my version I would have snow and once the user has erased 50% of the canvas I'd like parts of the snow (canvas) to appear again, as if it were

Solution 1:

How the "frost" effect works

That demo works by stacking an image element directly under a canvas element.

The overlaying canvas "hides" that image with a semi-transparent "frost". The frost consists of a medium-opacity rectangle drawn on the canvas.

The effect "erases" the frost by using compositing to "erase" the frost where the use drags the mouse. "Erasing" is achieved using:

context.globalCompositeOperation="destination-out";

// Now allnew drawings will "erase" any existing pixels 

In this effect new circles drawn as the user drags will "erase" the frost.

Adding a Refrosting effect

If you want to "refrost" the canvas:

Start by adding the [x,y] of each new dragged circle in an array.

Then create an animation loop that continuously redraws the frost layer.

• Clear the canvas,

• Refrost the entire canvas,

• Remove several circles from the beginning of the array,

• Redraw each remaining circle in the array using "destination-out" compositing to erase the frost.