HTML5 canvas resources for beginners

HTML5’s <canvas> element is one of the large driving forces behind my excitement for HTML5 development. Canvas provides a wonderful way to add extra shine and glitz to your HTML5 application beyond what JavaScript can provide via animations and events. Prior to HTML5, the solution to providing that extra glitz was to embed an Adobe Flash or Microsoft Silverlight object into your application. Now there is a non-proprietary solution: HTML5’s canvas. However, not every web developer is currently familiar with canvas. To help those who are unfamiliar, I’ve gathered a few handy links to help those interested in working with the canvas element.

• Dive into HTML5's canvas section - A great introduction to canvas development. I highly recommend stepping through it if you have had no canvas experience before.
• Canvas Demos – A showcase of amazing canvas and webGL demos. It is a great place to get excited about canvas. They also share some wonderful tutorials. Some really great demos I found via this site are LucidChart, jTenoriOn, CanvasMol, and iGrapher.
• The HTML5 Canvas Cheat Sheet – This compact, simple reference sheet provides you with a stripped down look at the attributes and methods of the canvas element and the 2d drawing context. You will want this close to you when you are working with canvas a lot.
• HTML5 Canvas Tutorials – This site, created by the author of the kineticJS library, showcases a wide variety of tutorials and demos. You can find many examples of the kinectJS library here.
• Beginning game development with html5 - This is a free course on using canvas for game development. This course even has many videos in each lesson, which can be quite helpful.
• And of course, the actual canvas specification.

Those resources should serve as a great starting point for canvas development. If you have come across any other really useful references or tutorials related to canvas, let us know in the comments!