Tải bản đầy đủ - 0 (trang)
Chapter 6. Basic Drawing with the Canvas

Chapter 6. Basic Drawing with the Canvas

Tải bản đầy đủ - 0trang

​ etting Started with


the Canvas

Note: For some developers, the canvas will be indispensable. For others, it will just be an interesting

diversion. (And for some, it may be interesting but still way too much work compared with a mature programming platform like Flash.) But one thing is certain: This straightforward drawing surface is destined to

be much more than a toy for bored programmers.

Getting Started with the Canvas

The element is the place where all your drawing takes place. From a markup point of view, it’s as simple as can be. You supply three attributes: id, width, and


The id attribute gives the canvas a unique name, which you’ll need when your script

code goes searching for it. The width and height attributes set the size of your canvas,

in pixels.

Note: You should always set the size of your canvas through the width and height attributes, not the

width and height style sheet properties. To learn about the possible problem that can occur if you use

style sheet sizing, see the box on page 201.

Ordinarily, the canvas shows up as a blank, borderless rectangle (which is to say it

doesn’t show up at all). To make it stand out on the page, you can apply a background

color or a border with a style sheet rule like this:

canvas {

border: 1px dashed black;


Figure 6-1 shows this starting point.

To work with a canvas, you need to fire off a bit of JavaScript that takes two steps.

First, your script must use the document.getElementById() method to grab hold of

the canvas object:

var canvas = document.getElementById("drawingCanvas");

This is no surprise, as you use the getElementById() method anytime you need to

find an element on the current page.

Note: If you aren’t familiar with JavaScript, you won’t get far with the canvas. To brush up with the absolute

bare-minimum essentials, read Appendix B. Or, if you need to hone your programming skills and take time to

get more comfortable with the JavaScript language, check out JavaScript & jQuery: The Missing Manual.

Next, your code must use the canvas object’s getContext() method to retrieve a twodimensional drawing context:

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


html5: the missing manual


​Getting Started with

the Canvas

Figure 6-1: 

Every canvas begins as an empty

rectangle somewhere on a web

page. To put even a single line

inside, you need to write some

JavaScript code.

You can think of the context as a supercharged drawing tool that handles all your

canvas tasks, like painting rectangles, writing text, pasting an image, and so on. It’s a

sort of one-stop shop for canvas drawing operations.

Note: The fact that the context is explicitly called two-dimensional (and referred to as “2d” in the code)

raises an obvious question—namely, is there a three-dimensional drawing context? The answer is not yet,

but the creators of HTML5 have clearly left space for one in the future.

You can grab the context object and start drawing at any point: for example, when

the page first loads, when the visitor clicks a button, and so on. When you’re just

starting out with the canvas, you probably want to create a practice page that gets to

work straightaway. Here’s a template for a page that does just that:

Canvas Test