HTML5 Web Application Development By Example Beginner's guide

Time for action – adding the toolbar object

Let's add the Toolbar object to our application. First we add a toolbar variable to CanvasPadApp and set it to a new instance of the Toolbar object. We pass in the toolbar's root <div> element as a parameter to the constructor:

var version = "4.2",
canvas2d = new Canvas2D($("#main>canvas")),
toolbar = new Toolbar($("#toolbar")),
        // code not shown...

In start() we override the toolbar object's toolbarButtonClicked() and menuItemClicked() methods to set them to our own implementations to handle those events:

toolbar.toolbarButtonClicked = toolbarButtonClicked;
toolbar.menuItemClicked = menuItemClicked;

First let's implement our CanvasPadApp.toolbarButtonClicked() method:

function toolbarButtonClicked(action) ...