HTML5 Tutorial: Canvas

The HTML5 canvas element is defined as a “resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” In other words, it’s a rectangular area you can place on your website that can contain lines, shapes, images, text, animation, games, etc… Think of it like this: You’re probably familiar with flash-based games and web tools. The canvas element is very similar, but doesn’t need flash.

Much like the video element, the canvas element will decrease our reliance on flash plugins. It can be used on any mobile device that supports javaScript, which includes smartphones.

The only catch: In order to place elements inside of the canvas, you must know JavaScript. If you do know JavaScript, the possibilities with the new canvas element are limitless. But, don’t worry if you don’t know javascript. There are tutorials and free code available already for the canvas.

Want to learn how it works? Keep reading…

Let’s get started

Adding a canvas to your web page is simple with the new canvas tag. For example, here’s the syntax for creating a canvas:
Code:

 <canvas id="”testCanvas”" height="”400”" width="”600”"> You should put some text right here just in case the browser doesn’t support the canvas element. </canvas> 

You’ll notice a couple things in that example. First, you must specify width and height for your canvas. Second, you should provide your canvas with a unique “id”. Why the “id”? Because you can have multiple canvas elements on one page. You need a separate “id” for each so your javaScript functions know which one to use.

What does the canvas look like? Not much, until you draw inside of it. For example, in the syntax above I created a 400×600 canvas. I would show you what it looks like, but right now, it’s just a white rectangle. There’s nothing inside the rectangle until we draw on it with javaScript.

Before we draw on our canvas, you must understand how the canvas grid is laid out. The coordinates (0,0) are located in the top left corner of the canvas. When you place elements on the canvas, you place them relative to the top left corner. Here’s an example of the canvas grid:

Anything placed on that grid is positioned relative to the top left. So, if I wanted to place an image 100 pixels away from the top and 150 pixels away from the left side, the coordinates would be (150, 100). Now that you understand how the canvas grid works, let’s put something inside of it.

Let’s draw something!

This is where javascript comes into play. Let’s start with the basics. Before you can place anything inside your canvas, you must add these two lines of javascript in between the head tags on your page:

Code:

var drawCanvas = document.getElementById("testCanvas"); var drawContext = drawCanvas.getContext("2d"); 

The first line identifies the canvas you wish to modify. The second line identifies the rendering context for the canvas. As of right now, 2d is the only rendering context available, as 3d canvases have yet to be standardized. (I’ve named the variables “drawCanvas” and “drawContext”, but you can name the variables whatever you like. Also, I’ve called the “testCanvas” example from above, but you should replace that with your canvas’ “id” tag.)

Okay, so we’ve made our canvas and have the javaScript necessary to find the canvas on the page and start drawing. What types of things can we add to our canvas? Quite a bit, and probably more than you expect. Here’s a short list of things you can add to a canvas:

  • shapes
  • text
  • lines
  • images
  • shadows
  • gradients
  • Animation
  • Interaction

 

I won’t explain how to add everything in that list or this would quickly turn into a very long javaScript lesson. However, I will show you how to add a simple rectangle, and provide you with the basic syntax for adding items to the canvas.

Alright, let’s draw a rectangle. Here are the 3 functions we can use when creating rectangles:
Code:

fillRect(x,y,width,height)//Draws a filled rectangle strokeRect(x,y,width,height)//Draws a rectangular outline clearRect(x,y,width,height)//Clears the specified area and makes it fully transparent 

The parameters in each function should be pretty self-explanatory. The x and y parameters position the rectangle in the canvas (see the grid above). The width and height specify the rectangle dimensions.

We’re going to draw a filled rectangle. Because I’m drawing a filled rectangle, I’ll use the “fillRect” function. Here’s the javascript needed for our rectangle.
Code:

 function draw(){ var drawCanvas = document.getElementById('testCanvas'); var drawContext = drawCanvas.getContext("2d"); drawContext.fillRect(100,100,50,50); } 

The first line names and creates the function. The second line tells the function which canvas it needs to alter. The third line tells the function that it is drawing in a 2d space. The last line tells the function to place a 50×50 rectangle in the canvas 100 pixels from the top and 100 pixels from the left.

Let’s look at a full example. I’ve taken the javaScript used above, added a couple items, and placed it in a full HTML page. This should help you understand how everything works together. Here’s the syntax:
Code:

<script type="text/javascript">// <![CDATA[
function draw(){ 
var drawCanvas = document.getElementById('testCanvas'); 
var drawContext = drawCanvas.getContext("2d");
drawContext.fillStyle = "rgb(50,100,150)";
drawContext.fillRect(100,100,50,50);
drawContext.font = "normal 11px sans-serif";
drawContext.fillText("This blue square is positioned at coordinates (100, 100) relative to the top left of the canvas", 100, 175);
}
// ]]></script><canvas id="testCanvas" width="600" height="400"></canvas>

Here’s a screenshot of the canvas created with the above syntax:

Feel free to copy the code listed above and play around with the canvas element on your own!

Examples

 

The canvas element is used for much more than drawing rectangles. In fact, there is already a website dedicated to applications, games, tools, and tutorials for it. You can check it out here: http://www.canvasdemos.com. You will be surprised when you see everything that is possible…I know I was.

Additionally, a new web-based drawing tool using the canvas element was recently released. Simply put: It’s amazing. You can use it here: http://muro.deviantart.com

Browser support

The canvas element is supported by every browser except for Internet Explorer 8 and prior. However, it’s still possible (and easy) to use the canvas in IE. There is an open-source JavaScript library that implements the canvas API in IE. To use it, you’ll need to add the following code to within the head tags of your HTML:
Code:

 // <![CDATA[ <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> // ]]> 

That code is ignored by every other browser except IE 8 and prior. It tells IE to download and execute the script. The script gives IE the ability to support the canvas tag.

Conclusion

The canvas element opens up all sorts of possibilities for web developers. Not only does it free us from flash, but it gives you the ability to add features to your sites that simply weren’t possible before HTML5. While those who understand JavaScript are at a bit of an advantage, there is so much free sample code around the internet, those who don’t understand JavaScript can still use the canvas on their own pages!

Related Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *