JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<canvas id="c"></canvas>

JavaScript

var PI = Math.PI,
    PI2 = PI / 2,
    TPI = 4 * PI2,
    PI180 = PI / 180,
    C = document.getElementById("c"),
    G = C.getContext("2d"),
    W = (C.width = 200);
H = (C.height = 250);;

with(G) {
    fillStyle = "#ccc";
    fillRect(0, 0, W, H);
    fillStyle = strokeStyle = "#000";
    lineWidth = 4;
    strokeRect(0, 0, W, H);

    beginPath();
    arc(50, 50, 10, 0, TPI, 1);
    closePath();
    fill();
    beginPath();
    arc(100, 100, 10, 0, TPI, 1);
    closePath();
    fill();
    beginPath();
    arc(85, 130, 10, 0, TPI, 1);
    fill();
    closePath();
}