Javascript canvas simple lightsource

Question

Я делаю игру с холстом javascript. Я рисую все игровые элементы, такие как игрок, блоки и линии, но я не хочу, чтобы вы все это видели. Вместо этого нужно, чтобы весь экран был черным, ожидайте в некоторых местах, где есть источники света. Мне не нужны никакие тени, просто круг на экране, который освещен радиальным градиентом. Я могу добиться этого в течение одного источника света путем добавления прозрачного градиента после того как я нарисовал все остальное, как это: (представьте себе красный прямоугольник быть все вещи в игре)

//Drawing all the game elements 
ctx.fillStyle = "red"; 
ctx.fillRect(100, 100, 400, 300); 

//adding the darkness and the lightsources 
var grd = ctx.createRadialGradient(150, 100, 5, 150, 100, 100); 
grd.addColorStop(0, "transparent"); 
grd.addColorStop(1, "black"); 
ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 400); 

JSFiddle

Но как я могу достичь этого с помощью нескольких источников света? Показанная техника не будет работать.

Я пробовал использовать Illuminated.js api, но это было невероятно медленно, и мне не нужно ничего из теней и всего, что причудливо, просто круг, где вы можете увидеть игру.

Answer 1

Вот пример моего подхода - создать черную & белую маску и умножать базу с ним:

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
//Drawing all the game elements 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(100, 100, 400, 300); 
 

 
//adding the darkness and the lightsources 
 
function addlight(ctx, x, y) { 
 
    var grd = ctx.createRadialGradient(x, y, 10, x, y, 150); 
 
    grd.addColorStop(0, "white"); 
 
    grd.addColorStop(1, "transparent"); 
 
    ctx.fillStyle = grd; 
 
    ctx.fillRect(0, 0, 600, 400); 
 
} 
 

 
var buffer = document.createElement('canvas'); 
 
buffer.width = 600; 
 
buffer.height = 400; 
 
b_ctx = buffer.getContext('2d'); 
 
b_ctx.fillStyle = "black"; 
 
b_ctx.fillRect(0, 0, 600, 400); 
 
addlight(b_ctx, 150, 100); 
 
addlight(b_ctx, 350, 200); 
 
addlight(b_ctx, 450, 250); 
 

 
ctx.globalCompositeOperation = "multiply"; 
 
ctx.drawImage(buffer, 0, 0);

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">