JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'rgb(255,0,255)';
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();
ctx.fillStyle = 'rgb(0,255,255)';
ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();
ctx.fillStyle = 'rgb(255,255,0)';
ctx.beginPath();
ctx.arc(75, 100, 50, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();