Meet the Canvas Element

The first thing we are going to do is add a canvas element to our page and make some adjustments to make them easier to work with. Before we get to any of that, you need is a blank HTML page that we will be working on. If you don’t have a blank HTML page and need some help creating one, go ahead and create a new document and add the following lines of markup into it:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Example</title>
</head>
 
<body>
 
</body>
 
</html>

Once you have a blank HTML document setup, it's time for the main event you have been eagerly waiting the past 30-ish seconds for!

Adding the Canvas Element

The canvas element is represented by the appropriately named canvas HTML tag, and it behaves just like any other HTML element you might have used in the past. To add a canvas element to your page, simply add the following opening and closing tag:

<canvas></canvas>

With this line, you have successfully added a canvas element to your document!

All that said, let’s not celebrate too soon. If you preview your page right now, you’ll be greeted with a deafening blank screen. The reason is that your canvas element by itself has nothing interesting going for it. It is merely a screen that JavaScript will eventually project pixels onto.

Visualizing our Canvas

Working with something invisible isn’t fun. To help us visualize our canvas element, let’s specify some CSS to give it a border. Add the highlighted style block to your document inside your head block:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Example</title>
  <style>
    canvas {
      border: #333 10px solid;
    }
  </style>
</head>
	.
  .
  .
 
</html>

Once you’ve added that CSS, preview your page now. If everything worked out properly, our page will look as follows:

  • HTML
As expected, our CSS gave our canvas a 10 pixel wide dark gray border! While this is normally nothing to write home about, in our case, we can at least see some evidence that the canvas element is indeed alive...and possibly well. Now that we can see our canvas element, doesn't it look a little too small? Let's fix that next!


Resizing our Canvas Element


By default, your canvas elements are 300 pixels wide and 150 pixels tall. That might be a good size, but we want something bigger...like 550 pixels by 350 pixels. Our initial reaction might be to add some width and height properties to our existing style rule that targets our canvas. As it turns out, you can't really do that and get the intended result.


To properly change your canvas element's dimensions, add the width and height attributes to your canvas element's HTML directly:


<canvas width="550px" height="350px"></canvas>
Yes, I know that looks a bit odd given that we have been told to use CSS for setting the size of elements in HTML. I am not saying that you can’t use CSS for setting the size. You can use CSS for setting the size on one condition: you preserve your canvas element’s aspect ratio. If you aren’t like we are, then setting the size via HTML is the only way to get the proper size without having all the pixels inside our canvas look all stretched and weird.


As you will keep finding out, there are some quirks about working with the canvas element that we all have to tolerate above and beyond the usual silliness commonly found in HTML elements :P


Giving Our Canvas Element an ID


The last and probably most important step is to give our canvas element an ID value so that you can reference it via JavaScript. On the canvas element, add the id attribute and give it a value of myCanvas:


<canvas id="myCanvas" width="550px" height="350px"></canvas>
The full markup for everything you should have in your document so far should look something similar to the following:


  • HTML
At this point, I would say don’t preview what you have in your browser. The reason is that you still won’t see anything different or drastic from what you had earlier. That is about to change, though!