JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=200 height=200></canvas>

CSS

body {
    background-color: ivory;
    padding:15px;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var point = drawEllipse(20, 50, 100);

function drawEllipse(x, cy, width) {
    // x=left, cy=vertical center of ellipse
    // note: just an approximation of an ellipse
    var height = width * 0.40;
    ctx.beginPath();
    ctx.moveTo(x, cy);
    ctx.bezierCurveTo(
    x + width / 2 * .05, cy - height,
    x + width - width / 2 * .05, cy - height,
    x + width, cy);
    ctx.bezierCurveTo(
    x + width - width / 2 * .05, cy + height,
    x + width / 2 * .05, cy + height,
    x, cy);
    ctx.closePath();
    ctx.stroke();
    return ({
        x: x + width,
        y: cy
    });
}