JSFiddle - React, Tailwind, and code Playground

by Dean Panayotov

HTML

<canvas></canvas>

CSS

canvas {
    background-color: #0000FF;
}

JavaScript

canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
cw = canvas.width;
ch = canvas.height;

//
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, cw, ch);
ctx.fillStyle = "#000000";
ctx.globalAlpha = 0.5;

var r=50;


// draw the blue background
// The background will be visible only outside the double-circles
ctx.fillRect(0,0,cw,ch);


// use destination-out compositing to "knockout" 
// the double-circles and thereby revealing the
// ivory webpage background below
ctx.globalCompositeOperation='destination-out';

// draw the double-circles
// and effectively "erase" the blue background
ctx.beginPath();
ctx.arc(cw/2-r/2,ch/2,r,0,Math.PI*2);
ctx.arc(cw/2+r/2,ch/2,r,0,Math.PI*2);
ctx.closePath();
ctx.fill();

// always clean up! Set compositing back to its default
ctx.globalCompositeOperation='source-over';