Let's use some transformations to draw an ellipse in Canvas Pad. An ellipse is basically a squashed circle. We can use the scale()
method to change the scale of either the x or y axis before drawing a circle to squash it into an ellipse. Let's add a drawEllipse()
method to the Canvas2D
object. It takes a center point, an end point, and a Boolean to determine if it should be filled:
this.drawEllipse = function(center, endPoint, fill) { var rx = Math.abs(endPoint.x - center.x); var ry = Math.abs(endPoint.y - center.y); var radius = Math.max(rx, ry); var scaleX = rx / radius; var scaleY = ry / radius; context.save(); context.translate(center.x, center.y); context.scale(scaleX, scaleY); context.beginPath(); context.arc(0, 0, radius, 0, Math.PI * 2, true); context.closePath(); if (fill) context.fill(); else context.stroke(); context.restore(); return this; };
There's a lot going on in here, so let's break it down:
save()
to save the state of the context before we start transforming it.beginPath()
, arc()
, and closePath()
. Since the canvas is scaled on one axis, the circle will be squashed into an ellipse.fill()
or stroke()
depending on the fill
parameter to draw the circle to the canvas.restore()
to restore the context to the way it was before we applied the transformations, and we're done.Now that we have a method to draw an ellipse, we can go add an Ellipse menu item to the Tool menu in our HTML:
<li data-value="ellipse">Ellipse</li>
The only thing left to do is add an option for the Ellipse tool in the switch
statement in redraw()
and we're done:
switch (action.tool) { // code not shown... case "ellipse": canvas2d.drawEllipse(action.points[0], action.points[1], action.fill); break; }
3.23.127.197