JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="200" height="400"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillStyle = 'rgba(255,0,0,.4)';

ctx.beginPath();
ctx.arc(50,50,20,Math.PI*2, 0);
ctx.arc(50,150,20,Math.PI*2, 0);
ctx.arc(150,100,20,Math.PI*2, 0);

ctx.stroke();
ctx.fill();