Why create HTML5 Canvas experiments?

One of my hobbies involves helping out at MagicDuel.com doing some programming for it now and then. One of the big pieces of legacy code/design we have in the game is a large amount of flash animations.

Since flash is going away quite soon now I am working towards moving these animations to HTML5 canvas. This brings a large number of benefits including it being much more lightweight and works on mobile devices.

To learn more about HTML5 Canvas I am creating a number of tutorials and projects to show what you can do and posting about it on my blog.

HTML5 canvas projects and tutorials

These are vaguely organised in difficulty order so it is suggested you look at the earlier tutorials first.

• Drawing Basic shapes with HTML5 Canvas - In this tutorial I show how you can draw basic shapes with the HTML5 canvas.
• Creating a basic loading progress bar animation with HTML5 Canvas - In this tutorial I show the basics of animating a basic loading progress bar with the HTML5 canvas.
• Better positioning of text using measureText with HTML5 Canvas - In this tutorial I am extending the previous and better positioning the text using measureText with the HTML5 canvas.
• Scaling Sprites for Pixel Art with HTML5 Canvas - In this example I am showing a simple way of scaling sprites for Pixel Art using the HTML5 canvas.