Introduction to the HTML5 Canvas

The HTML5 canvas is an extremely cool addition to the tools that you have at your disposal for building web applications in general. The canvas element provides web developers a way to integrate a custom drawing area into their HTML layouts. This can

be particularly useful and gives developers the ability to do more with their pages, whether that be adding some interactivity or displaying a graph.

While not all browsers include support for the canvas tag, Android’s WebKit browser does. This gives us the opportunity to explore using it in our applications, and possibly even writing simple games for Android purely using web technologies. While Flash ( www.adobe.com/products/flashplayer) is normally the tool of choice for writing simple games for the Web, the HTML5 canvas and JavaScript do provide a compelling

CHAPTER 7: Exploring Interactivity

alternative. And with cross-platform mobile support for Flash currently limited, this makes the canvas worth investigating.

We will do that now by first having a look at some of the simple operations that can be completed using the canvas.

In this first example, we will use the canvas to simply draw a line from the top-left corner of the display to the bottom right. First is the simplecanvas.html file:

<title>Simple Canvas Demo</title> <meta name="viewport" content="width=device-width; user-scalable=0;" /> <link rel="stylesheet" href="../../css/proui.css" /> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../../js/prowebapps.js"></script>

</head> <body>

</body> </html>

Nothing much to talk about here, apart from the presence of the canvas tag, which by itself does absolutely nothing. It’s time to look at the simplecanvas.js file that goes along with our HTML:

(function() { var canvas = null, context = null;

function resetCanvas() {

canvas = document.getElementById("simple");

// set the canvas height to the window height and width

Download from Wow! eBook <www.wowebook.com>

canvas.width = window.innerWidth; canvas.height = window.innerHeight;

// get a reference to our drawing context

context = canvas.getContext("2d");

// now draw the line drawLine();

} // resetContext

function drawLine() { context.beginPath(); context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); context.stroke();

} // drawLine

$(window).bind("resize", resetCanvas).bind("reorient", resetCanvas); $(document).ready(function() {

window.scrollTo(0, 1);

CHAPTER 7: Exploring Interactivity

resetCanvas(); }); })();

Even here, there really isn’t anything very complicated going on. Once you strip away the additional code to handle window resizing and so forth, the code does three things to draw the line:

It gets a reference to the canvas and sizes the canvas to match the window size. This is done when we capture a window resize event or the device orientation changes (thanks to our previous work in Chapter 1).

It gets a reference to the 2d context of the canvas. To achieve this, we use the getContext method of a canvas object.

It draws the line. This involves flagging to the canvas that we are going to draw a path with the beginPath method. We then use the moveTo method to move to the top-left corner (moving draws nothing), and then follow that with the drawTo method to draw to the bottom-right corner. Finally, we tell the canvas to draw a line along the path we defined, using the stroke method.

The result is displayed in Figure 7–1.

Figure 7–1. The canvas used to draw a diagonal line in the Android browser

CHAPTER 7: Exploring Interactivity

Introduction to the HTML5 Canvas