37354

html canvas freezing over animation

Question:

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>

Recommend

  • All export options are available. Not sure how to integrate it
  • Slide Effects for Tabs
  • Equal distance between Div's using Angular 5 and Flex Layout
  • Why am I not getting any values displayed in my ui-grid dropdown?
  • Butterfly Chart using Highcharts
  • Where to store a contact list on an Android phone?
  • IE7 dropdown menu appears behind image
  • MySql localhost vs Amazon RDS instance
  • map map return flat array in jQuery
  • SMTPClient Half Working \\ Half Not
  • CSS: Overlapping DIVs issue
  • How to use a Selector with a ListView and custom Adapter to indicate the selected item
  • Update the dataset in an installed package
  • How to correct mouse event in Highcharts
  • Shopify: Why does Liquid sometimes use {%- instead of {%?
  • How to plot predictions of binomial GLM that has both continuous and categorical variables
  • ASP.NET Deserialize Json object with single and array
  • Ember Select set default value
  • Spannable text is too wide for TextView
  • How to configure javadb in eclipse?
  • Add Jpanel to Jframe NetBeans
  • How to convert Neo4j Result to GraphJSON
  • Recursion in ASP.NET Core Razor views
  • Get rendered html code in Backing Component from Composite Component
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Making Google Visualization - Annotation Chart to work in GWT
  • LESS CSS how to modify parent property in mixin
  • Prevent Tomcat from caching request during starup
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • How to match http request and response using Jersey ContainerRequestFilter and ContainerResponseFilt
  • Python urlparse: small issue
  • FileReader+canvas image loading problem
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Weird JavaScript statement, what does it mean?
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • Why joiner is not used after Sequence generator or Update statergy
  • python draw pie shapes with colour filled
  • Django query for large number of relationships