Experiment - HTML5 Canvas Nebula


How it Works

This is a simple demonstration of a nebula effect using the HTML5 Canvas element. The effect is created by layering three images, derived from a larger single bitmap source, that fade in and out while increasing in scale. The non-repeating nature of the effect is created by having a larger bitmap than the view area and choosing a random texture offset.

Overall, I think the effect is quite nice, although I've probably spoilt it by describing how it works!


Drawing large, scaled and transparent bitmap images is never going to be conducive to fast performance on a software renderer like Canvas. In this demo, I cheat by generating the animation onto a smaller hidden Canvas, then copying this canvas onto the large visible one. Because there is no sharp detail, the scaling up looks reasonable. Roll-on hardware accelerated Canvas.

The Image

As you can see, the nebula image is a fine example of awful programmer graphics, but because its parts are always drawn as semi-transparent, the garish colours and detail blend nicely.

The nebula image
blog comments powered by Disqus
Share |

Useful website? You can donate to support it. Thanks.

Need Good Hosting?

Hostgator Reliable Hosting

I use Host Gator for this site, and have found them to be good value and very reliable. Sign up now and use coupon code professorcloud to receive a $9.95 rebate.

Books to improve your JavaScript skills