HTML5 Web Application Development By Example Beginner's guide

Time for action – creating drawing actions

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