Arhitector,
Просто непересекаемых дырок с небольшим сглаживанием по краю наделать можно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="border: 1px solid red"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
class Light1 {
constructor(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
}
}
class Dark1 {
constructor(width, height) {
this.width = width;
this.height = height;
this.lights = [];
}
draw(ctx) {
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, this.width, this.height);
for (let light of this.lights) {
ctx.moveTo(light.x, light.y);
ctx.arc(light.x, light.y, light.radius, 0, 6.3);
}
ctx.shadowColor = 'rgba(0, 0, 0, 1)';
ctx.shadowBlur = 20;
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fill('evenodd');
ctx.restore();
}
}
let dark1 = new Dark1(400, 250);
dark1.lights.push(new Light1(50, 50, 30));
dark1.lights.push(new Light1(150, 100, 50));
dark1.lights.push(new Light1(100, 160, 70));
dark1.lights.push(new Light1(300, 150, 100));
let img = new Image;
img.onload = function() {
ctx.drawImage(img, 660, 290, 400, 250, 0, 0, 400, 250);
dark1.draw(ctx);
};
img.src = 'https://javascript.ru/forum/attachments/misc/3976d1534094922-igra-na-js-ehffekt-nochi-game-3-jpg';
</script>
</body>
</html>
А так уже с градиентом наверное то что и нужно:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="border: 1px solid red"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
class Light2 {
constructor(x, y, power, degree0 = 0, degree1 = 360) {
this.x = x;
this.y = y;
this.radius0 = power * 50;
this.radius1 = power * 100;
let degree = Math.PI / 180;
this.angle0 = degree0 * degree;
this.angle1 = degree1 * degree;
}
}
class Dark2 {
constructor(width, height) {
let offscreen = document.createElement('canvas');
this.ctx = offscreen.getContext('2d');
this.width = offscreen.width = width;
this.height = offscreen.height = height;
this.lights = [];
}
draw(ctx) {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
this.ctx.fillRect(0, 0, this.width, this.height);
this.ctx.globalCompositeOperation = 'destination-out';
for (let light of this.lights) {
this.ctx.moveTo(light.x, light.y);
this.ctx.arc(light.x, light.y, light.radius1, light.angle0, light.angle1);
let grd = this.ctx.createRadialGradient(light.x, light.y, light.radius0, light.x, light.y, light.radius1);
grd.addColorStop(1, 'rgba(0, 0, 0, 0)');
grd.addColorStop(0, 'rgba(0, 0, 0, 0.75)');
this.ctx.fillStyle = grd;
this.ctx.fill();
}
ctx.drawImage(this.ctx.canvas, 0, 0);
}
}
let dark2 = new Dark2(400, 250);
dark2.lights.push(new Light2(50, 50, 0.3));
dark2.lights.push(new Light2(150, 100, 0.5));
dark2.lights.push(new Light2(100, 160, 0.7));
dark2.lights.push(new Light2(300, 150, 1, -150, -10));
let img = new Image;
img.onload = function() {
ctx.drawImage(img, 660, 290, 400, 250, 0, 0, 400, 250);
dark2.draw(ctx);
};
img.src = 'https://javascript.ru/forum/attachments/misc/3976d1534094922-igra-na-js-ehffekt-nochi-game-3-jpg';
</script>
</body>
</html>
Формула радиуса освещения от мощности (или что там у света?) взята от балды.