HTML5 Recipes: Getting Started with Canvas

Welcome to the series on HTML5. In this series, I plan to cover several new features that have been introduced as part of the HTML5 specification. I will discuss the new tags as well as the Javascript APIs that form part of the HTML5 umbrella.

I will take the approach of providing short cookbook style code snippets that give a brief description of the feature, sample code and a link to a working example to demonstrate it. The intention of the code will be to quickly demonstrate the absolute minimum that you can do to get going with a particular HTML5 feature. It may not be the best possible way to write the code but that is not the intent of the series.

HTML5 support in modern day browsers is increasing by the day. The recently released IE 9 too supports several parts of HTML5. If you working with the latest version of Google Chrome, Firefox Beta and Opera browser, you should be good to go. If you are IE, go for the IE9 Beta which was released recently. Wherever possible, I will point out the differences. And best of all, if you wish to try out some of the samples on your SmartPhone, you can do that. Most latest Smartphones ship with the Webkit browser which has good support for several parts of the specification.

Let us get started with Canvas in this recipe. Canvas is a part of the HTML5 specification and is an API that allows you to perform 2D operations. A Canvas can be loosely defined as a drawing area in your HTML page, where you can perform several operations like drawing lines, rectangles, your own custom shapes, fills, gradients and much more. We shall take baby steps over here and focus on simple operations like drawing a line, rectangle, etc. Most modern browsers have good support for the Canvas API. Google Chrome, Firefox and Opera support most parts of the Canvas specification. If you are using Internet Explorer, you will need to use IE Beta 9, which was released recently to run these examples.

Drawing a Line

This is almost like my own version of Hello World for Canvas API. The code is shown below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Line</title>
<script>
function draw_line() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");
 canvasCtx.moveTo(0, 0);
 canvasCtx.lineTo(200,200);
 canvasCtx.stroke();
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	var canvasCtx = canvasObj.getContext("2d");
        canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_line();return false">Click to draw a line</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>
    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

The main function to look at is draw_line(). The first thing before we can do any operation with the canvas is to get a handle to the canvas. This is done in a standard fashion via the getDocumentById() method. Now, before you can start invoking any operation on the canvas, you must first get a context to the canvas via the getContext method. The getContext method takes a single parameter and we request a 2D context from the canvas object. Once we have this context object, we can start invoking operations on it.

Remember the canvas co-ordinates are (0,0) in the top-left and they increase as you move to the right (x-axis) and down (y-axis).We wish to draw a line from (0,0) to (200,200) i.e. from the top-left corner to the bottom-right corner. This is accomplished by first positioning yourself at the start (0,0) via the moveTo method. Then we use the lineTo(x,y) method and specify that we wish to draw a line till (200,200). This by itself does not accomplish anything. It is more like we have defined a path. Once we are done with the path, we instruct the canvas to render it with the stroke() method.

If you look at the clear_canvas() function, you will notice that we are already using the Rectangle drawing support for the Canvas. More on that later.

See it in action here.


HTML5 Canvas Recipes

  1. Getting Started with Canvas
  2. Rectangles
  3. Strokes and Fills
  4. Drawing Text
  5. Paths
  6. Circles and Arcs
  7. Images
  8. Graphs With Canvas

Back to HTML5 Series

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s