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 ...

Get HTML5 Web Application Development By Example Beginner's guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.