HTML5 Web Application Development By Example Beginner's guide

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