JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="600" width="600">No canvas available</canvas>

CSS

#canvas {
    border: 1px solid red;
}

JavaScript

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

var C_RADIUS = 5, C_NUM =1, C_WIDTH = 2;

$('#canvas').click(function(e){

    ctx.lineWidth = C_WIDTH;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(30 - C_NUM * C_RADIUS, 20);
    ctx.lineTo(25 + C_NUM * C_RADIUS,20);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(10, 15 - C_NUM * C_RADIUS);
    ctx.lineTo(10, 15 + C_NUM * C_RADIUS);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle = 'black';
    for (var c = 0; c <= C_NUM; c++) {
        ctx.beginPath();
        ctx.arc(x, y, C_WIDTH / 2 + c * C_RADIUS, 0, 2 * Math.PI, true);
        ctx.closePath();
        ctx.stroke();
    }
});