Double Rainbow All The Way — An HTML5/canvas tutorial by Jim Bumgardner
In this tutorial, we’re going to make an animated double rainbow in HTML5 / Canvas. I’m doing this to teach you about the HSL color space, and to show you a more sophisticated way of using it.
I’ll soon have another tutorial which recreates the same examples in Processing.js. Some aspects of this are easier in Processing, and some are easier in HTML5/Canvas – the difficulty is roughly the same for both, I’ve found.
To draw a rainbow, we need a graphics framework to work with. In this tutorial, I’m going to draw everything using the Canvas APIs which are part of HTML5. This means that if you are using an older web browser, like IE 8 or earlier, you’re not going to see anything!