JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

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

function drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY) {
    ctx.beginPath();
    ctx.moveTo(centerX - (sizeX), centerY - (0));
    const C1 = [centerX - (sizeX), centerY - (0.552 * sizeY)];
    const C2 = [centerX - (0.552 * sizeX), centerY - (sizeY)];
    const E = [centerX - (0), centerY - (sizeY)];
    ctx.bezierCurveTo(...C1, ...C2, ...E);
		ctx.stroke();

    ctx.beginPath();
    ctx.arc(...C1, 3, Math.PI * 2, 0, false);
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc(...C2, 3, Math.PI * 2, 0, false);
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc(...E, 3, Math.PI * 2, 0, false);
    ctx.fill();
    
    ctx.beginPath();
    ctx.moveTo(...E);
    ctx.lineTo(...C2);
    ctx.stroke();
}

function drawBezierOval(centerX, centerY, sizeX, sizeY) {
    drawBezierOvalQuarter(centerX, centerY, -sizeX, sizeY);
    drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY);
    drawBezierOvalQuarter(centerX, centerY, sizeX, -sizeY);
    drawBezierOvalQuarter(centerX, centerY, -sizeX, -sizeY);
}

function drawBezierCircle(centerX, centerY, size) {
    drawBezierOval(centerX, centerY, size, size)
}

drawBezierCircle(200, 200, 100)