Javascript canvas simple light source
I am making a javascript canvas game. I draw all the game elements like the player, blocks and lines, but I don't want you to see all of this. It needs the whole screen to be black instead, expect some places where there are light sources. I don't need any shadows, just a circle on the screen that is illuminated with a radial gradient. I can achieve this for one light source by adding a transparent gradient after I've painted everything else, e.g .: (imagine the red rectangle is everything in the game)
//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);
But how can I achieve this with multiple lights? The technique shown will not work.
I tried using the Illuminated.js api but it was incredibly slow and I don't need any of the shadows and anything fancy, just a circle where you can see the game.
source to share
Here's an example of my approach - create a black mask and multiply it by the base:
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;">
source to share