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 – adding a circle tool

Let's add a circle menu item to our Tool menu:

<li data-value="circle">Circle</li>

Now let's go ahead and add a drawCircle() method to Canvas2D. Our method will take the center point, the radius, and a Boolean value to determine if the circle should be filled:

this.drawCircle = function(center, radius, fill)
{
    context.beginPath();
    context.arc(center.x, center.y, radius, 0, 2 * Math.PI, true)
    if (fill) context.fill();
    else context.stroke();
    return this;
};

If the fill parameter is set to true we call context.fill() after calling arc(). Otherwise we just use context.stroke() to draw the outline.

Finally let's add the code to redraw() to draw the circle. Here we need to do a little work to find the radius to pass ...

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