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 freezing over again but animating in slowing like someone were blowing hot air on it.
<a href="http://minimal.be/lab/jQuery.eraser/" rel="nofollow">http://minimal.be/lab/jQuery.eraser/</a>
Is there a way that this could be achieved?Answer1:
<strong>How the "frost" effect works</strong>
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 all new drawings will "erase" any existing pixels
In this effect new circles drawn as the user drags will "erase" the frost.
<strong>Adding a Refrosting effect</strong>
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.<ul><li>
Clear the canvas,</li> <li>
Refrost the entire canvas,</li> <li>
Remove several circles from the beginning of the array,</li> <li>
Redraw each remaining circle in the array using "destination-out" compositing to erase the frost.</li> </ul>