Draw Ellipse

HTML5 canvas draw ellipse with 2 bezier curves

HTML

<canvas width="400" height="300" />

JavaScript

function drawEllipseByBezierCurves(ctx, x, y, radiusX, radiusY, rotationAngle) {
    var width_two_thirds = radiusX * 4 / 3;
  
    var dx1 = Math.sin(rotationAngle) * radiusY;
    var dy1 = Math.cos(rotationAngle) * radiusY;
    var dx2 = Math.cos(rotationAngle) * width_two_thirds;
    var dy2 = Math.sin(rotationAngle) * width_two_thirds;
    
    var topCenterX = x - dx1;
    var topCenterY = y + dy1;
    var topRightX = topCenterX + dx2;
    var topRightY = topCenterY + dy2;
    var topLeftX = topCenterX - dx2;
    var topLeftY = topCenterY - dy2;
    
    var bottomCenterX = x + dx1;
    var bottomCenterY = y - dy1;
    var bottomRightX = bottomCenterX + dx2;
    var bottomRightY = bottomCenterY + dy2;
    var bottomLeftX = bottomCenterX - dx2;
    var bottomLeftY = bottomCenterY - dy2;
    
    ctx.beginPath();
    ctx.moveTo(bottomCenterX, bottomCenterY);
    ctx.bezierCurveTo(bottomRightX, bottomRightY, topRightX, topRightY, topCenterX, topCenterY);
    ctx.bezierCurveTo(topLeftX, topLeftY, bottomLeftX, bottomLeftY, bottomCenterX, bottomCenterY);
    ctx.closePath();
    ctx.stroke();
}

function drawEllipseByNative(ctx, x, y, radiusX, radiusY, rotationAngle) {
    if (ctx.ellipse) {
        ctx.beginPath();
        ctx.ellipse(x, y, radiusX, radiusY, rotationAngle, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.stroke();
    }
}

var canvas = document.getElement('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var context = canvas.getContext('2d');
var radiusX = 50;
var radiusY = 75;
var rotationAngle = 0;


setInterval(function(){
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    drawEllipseByBezierCurves(context, 100, 100, radiusX, radiusY, rotationAngle);
    drawEllipseByNative(context, 270, 100, radiusX, radiusY, rotationAngle);
    
    rotationAngle += Math.PI / 100;
}, 20);