O'Reilly logo

Sams Teach Yourself HTML5 in 10 Minutes by Steven Holzner

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required