JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <canvas id="stage" width="800" height="800"></canvas>
    </body>
</html>

JavaScript

function ellipse(cx, cy, w, h, color){  
    var canvas = document.getElementById('stage');    
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = color;
    ctx.beginPath();
    var lx = cx - w/2,
        rx = cx + w/2,
        ty = cy - h/2,
        by = cy + h/2;
    var magic = 0.551784;
    var xmagic = magic*w/2;
    var ymagic = h*magic/2;
    ctx.moveTo(cx,ty);
    ctx.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
    ctx.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
    ctx.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
    ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
    ctx.stroke();
}


ellipse(300,400,450,450, "blue");
ellipse(300,400,450,0450, "green");
ellipse(300,400,0450,450, "red");

ellipse(300,400,250,250, "blue");
ellipse(300,400,250,0250, "green");
ellipse(300,400,0250,250, "red");

ellipse(300,400,150,150, "blue");
ellipse(300,400,150,0150, "green");
ellipse(300,400,0150,150, "red");

ellipse(300,400,50,50, "blue");
ellipse(300,400,50,050, "green");
ellipse(300,400,050,50, "red");