JUMP START HTML5 (2014)

Chapter 12 Canvas & SVG: An Introduction to Canvas

As the Web has evolved and matured, so too has the language used to display web pages effectively. The previous version of HTML, v4.01 has many elements that are now obsolete.

Modern internet users are sophisticated and demanding, and this means they expect web pages to appear in a certain way and to load quickly. HTML5 seeks to address what was lacking in earlier versions of HTML to better handle graphics and meet those expectations.

What Can Canvas Be Used For?

Canvas can be used to draw shapes, such as rectangles, squares and circles, or to embed images or videos in an HTML5 document. You can use multiple instances of it in one document, or just one, depending on your needs.

The basic canvas element looks like this:

At this point, it's worth noting that the HTML5 canvas element is the DOM (Document Object Model) node that's embedded in the page. The context is then created, which is an object that you use in order to render graphics within the container. If you create multiple canvases, you'll need to create canvas elements for each context and name them appropriately so that the browser understands to which object you're referring.

The canvas element is superficially similar to the img element. Both have a height and width, and display in a rectangular block on the page. However, img normally loads a pre-prepared graphic, such as a photograph. canvas is a programmable image; you use JavaScript drawing methods to directly manipulate the pixels. The technology is fast and permits you to create sophisticated animations and games. Overall, canvas is often compared to technologies such as Flash and Silverlight.

Check out this animated graphic for a good example of what you can do using canvas. You should also check out Canvas Demos for some great working examples, including games and apps that have been created using canvas.

Before We Get Started

Some points to think about before we begin playing around with canvas:

· It's usually best to give each canvas a unique id attribute so your scripts can reference it directly. No other elements on that page should use the same ID.

· When no styling is applied, the container or the canvas element will be transparent, with no border, so it'll appear as a see-through, rectangular box. The default width is 300 pixels and the default height is 150 pixels.

· In an ideal world, everyone would use the latest browsers. But it isn't, and they don't. This means it's usually necessary to tell the browser how to behave when canvas is not supported.

· If you're used to working with the img element then you'll know that it doesn't require the closing </img> tag. canvas, on the other hand, does require closing, so you should always include </canvas> at the end of the container code.

It's also worth mentioning at this point that canvas uses coordinates, paths, and gradients. These can look a little daunting when you first come across them, and often have would-be developers running for the hills screaming "MATH!" But there's little need to worry—you'll soon get the hang of it.

Canvas Looks Complex, Why Not Use Flash?

I've come across a lot of questions posted on various forums that all say much the same thing: "Canvas looks far too complicated for creating animations—why shouldn't I just stick to using Flash since I know it already?"

Well, it's true that Flash enables you to create animations using professional tools, which don't necessarily require coding skills. However, canvas is superior to Flash in other ways, including:

· good compatibility on desktop and mobile devices

· it requires no plugins or dependencies outside of the browser

· it's free to use

· once you've learned to use it, canvas can create impressive animations using minimal code

What About WebGL?

WebGL enables 3D graphics to be rendered within the browser window, and for those graphics to be manipulated using JavaScript. If you're interested in using canvas then it's likely you'll be interested in investigating WebGL, too, at some point; the idea that you can create 3D graphics without plugins is a very attractive one. It's already supported by most browsers, too. That said, we won't be covering WebGL in this book.