JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="400" />

CSS

canvas{

JavaScript

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

// Color of the "mask"
context.fillStyle = '#000';
// Rectangle with the proportions of the image (600x400)
context.fillRect(0,0,600,400);

/**
* @param x Specifies the x-coordinate
* @param y Specifies the y-coordinate
* @param radius Specifies radius of the circle
*/
var clearCircle = function(x, y, radius){
    context.save();
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.restore();
};

// First circle
clearCircle(155, 190, 50);

// Second circle
clearCircle(300, 190, 70);

// Third circle
clearCircle(440, 200, 60);