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

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

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