JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

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

JavaScript

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

ctx.fillStyle = "#0000FF";
ctx.arc(60, 30, 5, 0, Math.PI * 2, true);
ctx.fill();
ctx.arc(60, 60, 20, 0, Math.PI * 2, true);
ctx.fill();
ctx.arc(90, 60, 5, 0, Math.PI * 2, true);
ctx.fill();
ctx.moveTo(60, 120);
ctx.arc(60, 120, 20, convertDegreesToRadians(-10), convertDegreesToRadians(10), true);
ctx.fill();

//drawCircle(ctx, 60, 60, 5, false, "#0000FF");

function drawCircle(ctx, x, y, radius, fill, fillStyle) {
    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
    ctx.fillStyle = fillStyle;
    if (fill) {
        ctx.fill();
    } else {
        ctx.stroke();
    }
}

//degrees = radians * (180/pi)
//radians = degrees * (pi/180)
function convertDegreesToRadians(deg) {
    return deg * Math.PI / 180;
}