technology28 Dec 2006 02:59 pm
Drawing an ellipse on <canvas>
This is just simple mathematics/geometry, but I remember googling for this for hours back when I first implemented the ellipse tool. Courtesy of Gavin Doughtie and Jon Stewart’s excellent presentation No Flash Required: Interactive Browser Graphics, this is how to draw an ellipse with bezier curves where x1/x2–y1/y2 is its bounding box.
var KAPPA = 4 * ((Math.sqrt(2) -1) / 3); var rx = (x2-x1)/2; var ry = (y2-y1)/2; var cx = x1+rx; var cy = y1+ry; trg.beginPath(); trg.moveTo(cx, cy - ry); trg.bezierCurveTo(cx + (KAPPA * rx), cy - ry, cx + rx, cy - (KAPPA * ry), cx + rx, cy); trg.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry); trg.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy); trg.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
January 27th, 2007 at 07:0
you could of course draw a circle and then scale it to let’s say scale(0.5, 1). That would also produce a nice ellipse and do so faster then the bezier approach.
August 17th, 2007 at 04:1
Very nice implementation of ellipse… is possible draw the border only?