Chapter 4. A Blank Canvas
"It's so fine and yet so terrible to stand in front of a blank canvas."
—Paul Cezanne
In this chapter we are heading out in a whole new direction. We will learn how to use the new HTML5 canvas element and API by creating a simple drawing application. Our application will use the canvas basics such as strokes, paths, lines, and shapes. We will create a toolbar using custom data attributes, which we learned in the previous chapter, to bind menu items to actions in our code.
We will learn the following in this chapter:
- The canvas element and its drawing API
- How to get a canvas context and what are its global properties
- How to draw lines, rectangles, and other shapes
- How to get the position of the mouse inside a canvas element
- How to create a toolbar that contains drop-down menus
- How to use custom data attributes to bind toolbar actions to JavaScript...
