JSFiddle - React, Tailwind, and code Playground

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 = .2;
var intensity = .8;
var radius = 100;
var amb = 'rgba(0,0,0,' + (1-ambientLight) + ')';


function drawCircle(x, y, rad) {
    var g = ctx.createRadialGradient(x, y, 0, x, y, rad);
    g.addColorStop(0,  'rgba(0,0,0,' + (intensity) + ')'); // the center
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.fillRect(x-rad,y-rad,rad*2, rad*2);
}

drawCircle(200,200,100);
drawCircle(250, 270,100);
drawCircle(50, 370,100);
ctx.fillStyle = amb;
ctx.globalCompositeOperation = 'xor';
ctx.fillRect(0,0,500,500);