JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function ellipse(cx, cy, w, h){  
    var canvas = document.getElementById('stage');    
    var ctx = canvas.getContext('2d');
    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(50,100,50,50);
ellipse(100,100,50,50);
ellipse(150,100,50,50);
ellipse(100,125,75,50);