In this post I will walk through the steps necessary to create basic animation using the HTML canvas element, some of the capabilities of the canvas context and how to configure Expression Web 4 to preview with the IE9 Platform Preview.
First, declare the canvas element in your HTML markup.
The new Internet Explorer 9 Platform Preview also supports the canvas element, and you can configure Expression Web 4 to use IE9 preview as another browser in which you can preview a page. From Expression Web, open the File menu, then select “Preview in Browser” then “Edit the Browser List…”In the Edit Browser List dialog click on the “Add…” button, browse for the IE 9 Platform Preview program (iepreview.exe), select it and make sure it’s checked in the Edit Browser List window and click OK.Now you can setup Expression Web to launch the IE 9 just by clicking the Preview in Browser button (F12).In this post we discussed how to perform basic drawing with the HTML canvas element and provided basic tips on animation. I hope that you enjoyed this post and continue exploring the new capabilities in the IE 9 Platform Preview and using Expression Web 4. I’d like to thank John Allsopp for his great HTML 5 Live course at Sitepoint.com which provided my first introduction to the canvas element and many more HTML 5 features.
Hi Gregory, Great post. I used this as an example in school to make bubbles through a porthole with fish as a background. It was pretty cool. Not sure you ever check this post anymore, but if you do, how do you reverse the direction of the bubbles so it will look like snow? Thanks.
Thanks for the kind comment. Yes, you sure can change the direction of the bubbles. The line that sets the y direction of the bubbles is:
var deltaY = -5 * Math.random() - 2.5;
You can change the code to:
var deltaY = 5 * Math.random() + 2.5;
and that will cause the bubbles to move down instead of up.