HTML5 - Mastering the Canvas Element (I)

Well, in the recent past, I've got a lot of messages from readers like you saying that they found the canvas drawing app tutorial series really interesting and would like to build their own drawing apps, but they are complete beginners in using the canvas element.

So, if you're one of those guys, you're in for a treat, because I've decided to build a tutorial series for people like you teaching you to use canvas from scratch!

Introduction

In this post, we're just going to say hello to the canvas element and learn about the syntax with an example. Thus following my not-to-stuff-too-much-technical-content-in-one-post policy. In the next post, we'll learn about the canvas' coordinate system.

Syntax

Here's the syntax for using the canvas element, and it's quite self explanatory:

<canvas id="something" width="something" height="something">
    Fallback text i.e. what to show if the browser doesn't support canvas?
</canvas>

Example and explanation

Here's an example canvas element:

<canvas id="mycanvas" width="500px" height="500px">
    Please upgrade to a browser that supports HTML5 canvas.
</canvas>

First we create our canvas element and specify the width, height and an id.

But what if the user doesn't have the latest Google Chrome or something? If they have an old browser that doesn't support HTML5 graphics we'll show then the message "Please upgrade to a browser that supports HTML5 canvas."

However, if the user has a new browser, they wont see the message...

Conclusion

Okay, so in this post, we learned to use the canvas element and also created a basic one. In the next post, we'll start talking about the coordinate system of the canvas. Now, if you're thinking "Hmm... I've already learned this thing in math class so I'll skip..." please don't, because the canvas element follows a different coordinate system than what you've learned in your math class.

In the tutorial that follows the one on coordinate system, we'll actually start drawing cool graphics on the canvas!