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 into drawCircle(). First we find the difference in x between the first and second point, then the difference in y. Whichever one is smaller we will use that as our radius:
switch (action.tool)
{
// code not shown...