JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<canvas id="canvas1" width="500" height="500" style="border: 1px solid black; background-image:url('http://placekitten.com/500/500');"></canvas>

JavaScript

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

var ambientLight = .1;
var intensity = 1;
var radius = 100;
var amb = 'rgba(0,0,0,' + (1-ambientLight) + ')';


// First circle
var g = ctx.createRadialGradient(200, 200, 0, 200, 200, radius);
g.addColorStop(1, 'rgba(0,0,0,' + (1-intensity) + ')');
g.addColorStop(0, amb);
ctx.fillStyle = g;
ctx.fillRect(200-radius, 200-radius, 200+radius, 200+radius);

// Second circle
var g = ctx.createRadialGradient(250, 270, 0, 250, 270, radius);
g.addColorStop(1, 'rgba(0,0,0,' + (1-intensity) + ')');
g.addColorStop(0, amb);
ctx.fillStyle = g;
ctx.fillRect(250-radius, 270-radius, 250+radius, 270+radius);

// Third!
var g = ctx.createRadialGradient(50, 370, 0, 50, 370, radius);
g.addColorStop(1, 'rgba(0,0,0,' + (1-intensity) + ')');
g.addColorStop(0, amb);
ctx.fillStyle = g;
ctx.fillRect(0, 370-radius, 50+radius, 370+radius);

ctx.fillStyle = amb;
ctx.globalCompositeOperation = 'xor';
ctx.fillRect(0,0,500,500);