"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 code