Creating a toolbar
Our toolbar will need the following buttons. The first three will be used to change the properties of the context. The last two will allow us to undo and clear the canvas.
Color: This button displays a drop-down menu where the user can choose a pen color
Opacity: This button displays a drop-down menu where the user can choose the pen opacity
Width: This button displays a drop-down menu where the user can choose the pen width
Undo: This button removes the last drawing action
Clear: This button clears the canvas and all drawing actions to start over
Custom data attributes, which we covered in the previous chapter, will be used throughout our toolbar to define actions for the toolbar buttons and options for our menus. We will use these later in our JavaScript to determine the action or option that was selected. Adding a little extra markup now will save us from writing a lot of repetitive code later on.
