Sams Teach Yourself HTML5 in 10 Minutes

Lesson 2. Drawing with the Canvas Element

The HTML5 Canvas element is a popular one, used to display graphics. The element itself is created very simply in HTML5, like this:

<canvas height-"yyy" width=xxx"></canvas>

That’s all you need to create a Canvas element. So how do you draw graphics in such an element? You use JavaScript, as we’ll see in this lesson.

The Canvas element can draw lines, arcs, complex shapes, images, text, and more. Let’s jump in to this element now.

Welcome to the Canvas Element

Technically speaking, the Canvas element is very simple in HTML5. Here’s the specification:

Element: <canvas>

Start tag required: Yes

End tag required: Yes

Required attributes: Height, width

Supported browsers: Chrome, Firefox, Opera, Safari