We will use a factory method to create this object. Let's add a newAction()method to CanvasPadApp that creates the action object for us with the current drawing options set:

function newAction(tool)
{
    return {
        tool: tool,
        color: canvas2d.penColor(),
        width: canvas2d.penWidth(),
        opacity: canvas2d.penOpacity(),
        points: []
    };
}

The newAction() method takes one parameter which is the name of the drawing tool the action will use. Next it uses curly braces to define a new object literal. The object will hold the tool, the context property values, and the points for that action. It gets the current color, width, and opacity settings from our Canvas2D object.

The next thing we need to do is remove the global points variable from the CanvasPadApp object and replace it with a curAction variable to hold the current action object created by newAction(). Let's also add a curTool variable to hold the current tool, and set it to "pen":

varversion = "4.2",
    // code not shown...
  curTool = "pen",
  curAction = newAction(curTool),
    actions = [];

Now, wherever we used the points variable before we will need to change it to use curAction.points instead. The first spot is the penDown() method:

function penDown(pageX, pageY)
{
    drawing = true;
    curAction = newAction(curTool);
    curAction.points.push(
        canvas2d.getCanvasPoint(pageX, pageY));
    actions.push(curAction);
}

First we set curAction to a new action object, and then add the first point to the curAction object's points array. Then we add curAction to the actions array.

The next stop is the penMoved() method. There we add the next point to the action's points array:

function penMoved(pageX, pageY)
{
    var canvasPoint = canvas2d.getCanvasPoint(pageX, pageY);
    showCoordinates(canvasPoint);
    if (drawing)
    {
        curAction.points.push(canvasPoint);
        redraw();
    }
}

We also need to update the penUp() method:

function penUp()
{
    if (drawing)
    {
        drawing = false;
        if (curAction.points.length < 2)
        {
            actions.pop();
        }
    }
}

First we check the drawing variable to make sure we are indeed drawing. If so we turn off the drawing flag by setting it to false. Next we need to make sure there are at least two points in the action's points array. If the user pressed the mouse button but didn't move it, there would only be one point. We can't draw anything without two points so we'll just remove that action from the actions array using pop().

Lastly, we will update the redraw() method. Here's where we need to make some substantial changes:

function redraw()
{
    canvas2d.clear();
    canvas2d.savePen();

    for (var i in actions)
    {
        var action = actions[i];
        canvas2d.penColor(action.color)
                .penWidth(action.width)
                .penOpacity(action.opacity);

        canvas2d.drawPoints(action.points);
    }

    canvas2d.restorePen();
}

First of all notice the calls to savePen() and restorePen() in the Canvas2D object. They will save the current context properties before we start drawing all of the actions and then restore them when we are done. We will implement those in a moment. Next we iterate over all of the actions setting the pen color, width, and opacity for each one (using function chaining) before drawing the points.