A few weeks ago we started a series of HTML5 related posts. This is the last post of that series and this one covers the most revolutionary feature of HTML5, Canvas !!! Thanks to Canvas, the internet gurus think time of the Flash is over. Developers have created many interesting games and advance level animations using this code. What it is, how it works and a short tutorial is what you’ll get in this post.

Though this series is over but today I can announce another venture of Designzzz. eBooks!! In the upcoming months we aim to produce many free eBooks and guides, this is because of the immense response you gave to our first eBook, Photoshop Crash Course. Our next book will be about Web Designing, covering the subjects of Designing, and basics of HTML and CSS in a fast-track manner. We need your suggestion, please if you have any, do comment.

If you haven’t checked our previous posts, I suggest you do so…

Previously in this series:

What does Canvas Do?

An Animation made in HTML5 Canvas

<canvas> is an HTML5 element/code property which creates graphics using scripting (mostly used with JavaScript). With Canvas you can make draw charts and graphs, you can create photo effects and you can even create animations, no Flash required. But you will be able to create such dramatic effects only once you have a full command over it, right now, we’ll take a look at the basics.

History Bite

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element.

Mozilla Developer’s Network

So we come to a conclusion that if we want to work with Canvas like the masters, we’ll have to grip two coding languages. Ajax and jQuery are taking over the developer’s world very instantly so I suggest you should give JavaScript a try. Now let’s have a look at its basic tutorial.


Now let’s draw a circle using Canvas.

HTML5 Code

<canvas id="DesignzzzCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.

JavaScript Code

<script type="text/javascript">
var c=document.getElementById("DesignzzzCanvas");
var cxt=c.getContext("2d");

Your browser does not support the canvas element.

Understanding the Code

You can see that in the HTML5 code we associated a name of "DesignzzzCanvas". in the JavaScript we assigned our variable (var) and context (cxt) values to it.
The text in the center “Your browser does not support the canvas element.” displays when your browser doesn’t support HTML5.

If I have missed something, please do tell me in comments, and that’s all for now, I’m leaving you with a few extra resources. Enjoy!



A game developed in HTML5. Simple yet fun.

HTML5 Game Demo Example


A Complete paint program made in HTML5.

Application Development in html 5

HTML5 Canvas Cheat Sheet

The downloadable cheat sheet or reference guide to all the properties of Canvas code.

free pdf guide


Canvas on Wikipedia
Canvas on Mozilla Developers Network
Canvas on eHow
Canvas on W3Schools

Pin It