I created a new version of my particle demo using the HTML5 <canvas>. This version is full screen, inspired by this amazing canvas demo at Iteration Six. I’d seen their demo prior to my starting to tinker with the canvas tag, but I never really tore it apart and looked inside. From what it appears, my code and their code were achieving a lot of the same things, so I decided to update mine to take advantage of some of the exciting features in their demo, including the full screen mode and the mouse interactions.

This demo uses a bit more jQuery than the previous one to handle mouse events. The canvas is much larger than the previous one, so I had to make some small changes to increase performance. Most notably, I had to halve the framerate – this demo runs at 10fps rather than 20. I sped up the particle speed so they cover distance quicker as well.

Here’s a cool particle demonstration of the HTML5 <canvas> tag. It’s a tremendously small amount of JavaScript code that is responsible for pushing some radial gradient particles around a canvas. You can check out the source code to see how things are done – it uses jQuery a bit and the demo itself uses a free color picker control.

The demo works best in Firefox. Chrome has some ugly rendering artifacts when the gradients cross over one another and Safari can’t push a lot of particles on the screen without dying, but Firefox can render several hundred particles with ease (Internet Explorer doesn’t support <canvas> at all). If the computation for this demo were to be done on a GPU rather than a CPU, you’d probably be able to pump out thousands of particles with no issues.