HTML5 Web Application Development By Example Beginner's guide

Time for action – adding an Ellipse tool

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(); ...