Question

I am trying to draw an ellipse onto an html5 canvas by defining a rectangle via the mouse. I can do this but using my current method, the ellipse is not snuggly fitting into my bounding rectangle. How I can draw this ellipse so it fits perfectly into it’s bounding rectangle?

Here is what I have:

    var a1x = self.x;
    var a1y = self.y - self.h / 2;

    var a2x = self.x;
    var a2y = self.y + self.h / 2;

    var c1x = self.x + self.w / 2;
    var c1y = self.y - self.h / 2;
    var c2x = self.x + self.w / 2;
    var c2y = self.y + self.h / 2;

    var c3x = self.x - self.w / 2;
    var c3y = self.y + self.h / 2;
    var c4x = self.x - self.w / 2;
    var c4y = self.y - self.h / 2;

    context.beginPath();
    context.moveTo(a1x, a1y);

    context.bezierCurveTo(
        c1x, c1y,
        c2x, c2y,
        a2x, a2y
    );

    context.bezierCurveTo(
        c3x, c3y,
        c4x, c4y,
        a1x, a1y
    );

    context.fillStyle = "red";
    context.fill();
    context.closePath();
    context.strokeRect(this.x - this.w / 2, this.y - this.h / 2, this. w, this.h);

Answer 1

CanvasRenderingContext2D.prototype.ellipse =
    CanvasRenderingContext2D.prototype.ellipse ||
        function(x, y, width, height)
        {
            this.save();
            this.translate(x - width/2, y - height/2);
            this.scale(width, height);
            this.arc(0, 0, 1, 0, 2 * Math.PI, false);
            this.restore();
        };

CanvasRenderingContext2D.prototype.circle =
    CanvasRenderingContext2D.prototype.circle ||
        function(x, y, radius)
        {
            this.arc(x, y, radius, 0, 2 * Math.PI, false);
        };

You must call beginPath before and stroke or fill after in order to see them, as with any other path element.