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:
- Getting to Know HTML5
- Wowing Demos of HTML5 with jQuery
- Mega Collection of HTML5 Cheat Sheets & eBooks
- How to Convert Your WordPress Theme into HTML5
What does Canvas Do?
<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
Now let’s draw a circle using Canvas.
<canvas id="DesignzzzCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
Understanding the Code
You can see that in the HTML5 code we associated a name of
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.
A Complete paint program made in HTML5.
The downloadable cheat sheet or reference guide to all the properties of Canvas code.