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