In this chapter, we created a drawing application called canvas pad which can be used to make simple drawings. Along the way we learned how to use the HTML5 canvas element and API. We also learned how to implement a reusable toolbar with menu items that are bound to actions using custom data attributes. We now have a reusable toolbar we can use in other applications.
We covered the following concepts in this chapter:
- How to use the
<canvas>element and the canvas API - How to get a canvas context and change global drawing properties such as width, color, and opacity
- How to use paths to draw free lines and shapes
- How to draw lines, rectangles, and circles
- How to get the position of the mouse inside a canvas element
- How to create a reusable toolbar and implement drop-down menus
- How to use custom data attributes to bind actions to menu items
In the next chapter we will continue our exploration of the canvas. We will learn some more advanced canvas features such as transformations and rotations. We will also see how to load images and export them from the canvas, in the process touching upon the file API. Then we will get down to the individual pixels of the canvas to do some image manipulation.