Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

459

Chapter 12 Drawing with HTML5

CHAPTER 12 Drawing with HTML5

I

n the past, the most common method for drawing on a webpage was by using Adobe

Flash. As the quest to create browsers that don’t require plug-ins to display multimedia

continues, a large gap in functionality has been filled with the ability to draw in HTML5 by

using the <canvas> element and to create and display Scalable Vector Graphics (SVG) by

using the <svg> element.

Although Adobe Flash still provides more functionality than the <canvas> element, you

might find that the <canvas> element is all you need and that you don’t need to add a

third-party product to your application.

SVG is a language by which to define two-dimensional graphics in XML, and the XML can

be rendered by the browser by using the <svg> element. Although you could learn SVG and

write SVG graphics, you will likely use an image editor to create SVG images and then use

them in your web application. The benefit is that the images are scalable.

This chapter presents the <canvas> element and demonstrates drawing on the canvas.

This is not an all-inclusive tutorial on this element, however; its power could easily fill its

own book. The chapter then presents the <svg> element from an implementation perspec-

tive rather than from a drawing perspective.

Lessons in this chapter:

■■Lesson 1: Drawing by using the <canvas> element 460

■■Lesson 2: Using scalable vector graphics 495

Before you begin

To complete this book, you must have some understanding of web development. This

chapter requires the hardware and software listed in the “System requirements” section in

the book’s Introduction.