JSFiddle - React, Tailwind, and code Playground

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),
    d = function(d) {
        return (Math.PI / 180) * d;
    };

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

    arc(50, 50, 10, 0, TPI, 1);
    arc(100, 50, 10, d(180), d(179.9), 0);
    arc(100, 100, 10, d(180), d(180.1), 1);
    arc(50, 100, 10, 0, TPI, 0);
    lineTo(60, 50);
    stroke();
    fill();
}