HTML5 Tutorials: Making Your First Canvas || HTML5 Canvas Tutorial 1

Introduction

HTML5 has added many new features to websites, one of which being the canvas element. The canvas element can be used to draw graphics in your webpage using a scripting language. This tutorial was made to help you understand and utilize this powerful new feature.

Before diving right into the tutorial I should mention that you will need to have some knowledge about other technologies to have a better chance in succeeding to create a HTML5 canvas. A basic knowledge of html and Java Script is mandatory, and knowledge of CSS is, for the most part, optional.

Creating an HTML5 Document

To start things out, I will show you the basic way to start a HTML5 file.

<!DOCTYPE HTML>

<html>

<head>

<title>

HTML5 Canvas Tutorial

</title>

</head>

<body>

</body>

</html>

It has pretty much everything that a normal html or xhtml document is required to have. The only real difference is in the document type. For a HTML5 file the document type should be as follows.

<!DOCTYPE HTML>

Adding the Canvas Element

To add a canvas to a HTML5 document you simply need to add the canvas opening and closing tags to the document somewhere within the document's body tags. Once you add a canvas it will look something like the following.

<!DOCTYPE HTML>

<html>

<head>

<title>

HTML5 Canvas Tutorial

</title>

</head>

<body>

<canvas id="myCanvas"></canvas>

</body>

</html>

Now, if you were to try and load this page into your web browser you wouldn't see anything besides a plain white screen. In order to see where your canvas actually is we are going to add a border around it. To add your border we are going to add some css to our HTML5 document. There are many ways to do this, but I am simply going to add an internal style sheet to our document and add one styling rule to add the border. To do so I add the code below in between the head tags of our document under the title element.

<style type="text/css">

#myCanvas {

border:1px solid #000000;

}

</style>

If you were to load this file again, you should now see a blank screen with a black rectangle outlined in it, as shown below.

I know all of you are jumping up and down with excitement at the sight of your epic canvas rectangle, but if you stick with me for just a little bit longer we can actually do some pretty cool stuff with this rectangle.

Adding a Square to Your Canvas

It is finally time to actually do something with this blank canvas. Lets say for some reason you wanted to print a blue square in your canvas. In order to add your blue rectangle you need to use JavaScript to tell the canvas what to draw and where to draw it. Place the following snippet directly underneath the canvas tags.

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#0000FF';

ctx.fillRect(20,20,100,100);

</script>

If view your HTML5 document now you should see this.

The first line of this code is the opening tag for an internal script and the last line is the closing tag. Any code within these script tags will run right after the canvas element is initialized. The second and third line tell JavaScript which element it needs to add these changes to. The forth line tells the canvas that we want to use the color #0000FF (aka blue). And finally the fifth line tells the canvas to draw a rectangle at the coordinates 20, 20 (X, Y) and that the rectangle should be 100 pixels wide and 100 pixels tall.

Finished Code

Your finished code should look something like this.

<!DOCTYPE HTML>

<html>

<head>

<title>

HTML5 Canvas Tutorial

</title>

<style type="text/css">

#myCanvas {

border:1px solid #000000;

}

</style>

</head>

<body>

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#0000FF';

ctx.fillRect(20,20,100,100);

</script>

</body>

</html>

Conclusion

Although it may be hard to see it from this example, HTML5's canvas element can be a very powerful tool. There are thousands of uses for it. This tutorial was designed to show you the basic use of a canvas element, but you should be aware that you can do so much more with it. It can use events that happen within the browser to change the appearance of the canvas. Very dynamic games and animations can be created using the canvas tag. I hope you found this beginner tutorial helpful.

HTML5 Tutorials

Tuesday, March 20, 2012

Making Your First Canvas || HTML5 Canvas Tutorial 1