Canvas takes lots less CPU

[wmertens]

If you ever feel like a rewrite, here's one that is implemented using a canvas: http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect

It uses way less CPU and is smooth on my phone. I simply create the canvas element on the fly with position absolute and it works great. Yours has more features though.

[jtibbertsma]

Using a canvas is an interesting idea, but it seems like if you wanted to get the effect of the snow falling in front of everything, then you would have to position the canvas above every other element on the page. Then you would have to set the canvas to pointer-events: none to be able to click anything. But that doesn't work on many browsers yet.

[wmertens]

Good point! Hmmm…

On Thu, Dec 3, 2015, 7:33 AM Joseph Tibbertsma notifications@github.com wrote:

Using a canvas is an interesting idea, but it seems like if you wanted to get the effect of the snow falling in front of everything http://www.schillmania.com/projects/snowstorm/, then you would have to position the canvas above every other element on the page. Then you would have to set the canvas to pointer-events: none to be able to click anything. But that doesn't work on many browsers yet.

— Reply to this email directly or view it on GitHub https://github.com/scottschiller/Snowstorm/issues/21#issuecomment-161531524 .

Wout. (typed on mobile, excuse terseness)

[wmertens]

Here's a polyfill for pointer-events:none https://github.com/kmewhort/pointer_events_polyfill. Needs jQuery though.

On Thu, Dec 3, 2015 at 5:05 PM Wout Mertens wout.mertens@gmail.com wrote:

Good point! Hmmm…

On Thu, Dec 3, 2015, 7:33 AM Joseph Tibbertsma notifications@github.com wrote:

Using a canvas is an interesting idea, but it seems like if you wanted to get the effect of the snow falling in front of everything http://www.schillmania.com/projects/snowstorm/, then you would have to position the canvas above every other element on the page. Then you would have to set the canvas to pointer-events: none to be able to click anything. But that doesn't work on many browsers yet.

— Reply to this email directly or view it on GitHub https://github.com/scottschiller/Snowstorm/issues/21#issuecomment-161531524 .

Wout. (typed on mobile, excuse terseness)

Wout. (typed on mobile, excuse terseness)

[DekiGk]

Has anyone found a way to use this plugin with minimum impact on CPU? What can I do to reduce the CPU resources consumption?

[jtibbertsma]

@DekiGk You could try using particlesJS. It uses a canvas element. It gives you a lot of control, so it would also solve #28.

[DekiGk]

@jtibbertsma Thanks for the link. I will try it out. Maybe I can use this on the next project. :D

[scottschiller]

I am fully late on replying to this, my apologies! I'm interested in <canvas> and looked at it way back in the day (Snowstorm.js began in 2003), but the first issue I ran into was interfering with mouse events and layering. These days, support should be pretty much universal - and importantly, helpful for mobile where CPU and battery are things you really do want to save.

It would be wise to revisit this and perhaps narrow the feature set a bit - i.e., assuming improved rendering, the overlay would be width/height: 100% at all times, and snow could "stick" to the bottom but would not be able to scroll the entire vertical length of the document.

I just had a report of Firefox Quantum (57) showing a performance regression that appears to be from the "sticky" snow feature, which uses position: fixed. When that kicks in, rendering performance goes notably downhill. So, this is one more reason to revisit and consider <canvas> or something more modern.

More thoughts here, I mulled on transform and so forth as well. https://github.com/scottschiller/Snowstorm/issues/31#issuecomment-348718597