Double Rainbow All The Way — An HTML5/canvas tutorial by Jim Bumgardner

What does it mean!?
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!

Keep Reading this Tutorial at…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.