Smashing Html5

Chapter 13: Thundering Your Site with Canvas

One of the most important additions to HTML5 is the <canvas> tag. With it, you can draw just about anything on an HTML5 page. With just two attributes, width and height, there’s not a lot to remember about attributes. However, the canvas element is implemented in what might be called a Document Object Model (DOM) style. Chapter 12 describes the DOM in detail. Essentially, DOM style means writing the required JavaScript with references to objects and their methods and properties.

If that kind of talk has you quaking in your flip-flops, relax. Throughout the book, the HTML5 tags (elements) have used attributes, and attributes are just properties of the elements. For the most part, writing JavaScript code is just assigning values to properties, and since you know how to do that from assigning values to attributes — height=”200”, for instance — there’s less that’s new about writing this kind of code than you may think.

To help you along, the JavaScript in use employs what you might call “OOP Lite.” The DOM represents object oriented programming (OOP) in that all references are to different objects and their properties. By setting up the JavaScript using a similar style — creating objects and then assigning them properties and methods — your code will look a lot like expressions taken from the DOM.

Canvas Basics

Because the canvas element is a crucial part of HTML5 and works only with HTML5-compatible browsers, the first thing you want ...