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)
{
    switch (action)
    {
        case "clear":
            if (confirm("Clear the canvas?"))
            {
                actions = [];
                redraw();
            }
            break;
        case "undo":
        ...