Archives for December 2011

Nova – HTML5 Canvas Particles

A celestial particle effect with pleasing color changes, enhanced by the Fast Blur code from quasimondo.

Pure HTML5 canvas and JavaScript particles – methods for fading trails

A pretty particle effect in HTML5 Canvas with fading trails. We discuss some issues with browser differences, and a resulting solution for consistency across browsers.

Elliptical gradients in HTML5 canvas

We show how to create an elliptical gradient in the HTML5 canvas, using a radial gradient along with a context transformation. Full source code available for download.

A simple HTML5 Canvas dragging example using object oriented programming

A new HTML5 Canvas tutorial. We rework our simple example of dragging display objects with the mouse to illustrate object-oriented programming techniques in JavaScript. Display objects are defined by abstract classes which contain methods for drawing and performing hit tests.

Smooth dragging – extending our simple dragging example

A new HTML5 Canvas and JavaScript tutorial. We extend our earlier simple example of dragging objects in the canvas with the mouse. Here, we use a timer-based animation technique with smooth motion, show how to change the layering order of the dislpay objects, and fill the objects with a nice gradient.