O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required