title: Multiple light sources on canvas
body: <p>I want to place a number of light sources on a background for a game I'm making, which works great with one light source as shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/ymRsf.png" alt="enter image description here"></p>
  
  <p>This is achieved by placing a .png image above everything else that becomes more transperant towards the center, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/kNJcv.png" alt="enter image description here"></p>
  
  <p>Works great for one light source, but I need another approach where I can add more and move the light sources around.</p>
  
  <p><img src="https://i.stack.imgur.com/CIWiS.png" alt="enter image description here"></p>
  
  <p>I have considered drawing a similar "shadow layer" pixel by pixel for each frame, and calculate the transparency depending of the distance to each light source. However, that would probably be very slow and I'm sure there are way better solutions to this problem.</p>
  
  <p>The images are just examples and each frame will have considerably more content to move around and update using requestAnimationFrame.</p>
  
  <p>Is there a light weight and simple way to achieve this? Thanks in advance!</p>
  
  <p><strong>Edit</strong></p>
  
  <p>With the help of ViliusL, I came up with this masking solution:</p>
  
  <p><a href="http://jsfiddle.net/CuC5w/1/" rel="noreferrer">http://jsfiddle.net/CuC5w/1/</a></p>
  
  <pre><code>// Create canvas
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = 300;
  canvas.height = 300;
  document.body.appendChild(canvas);
  
  // Draw background
  var img=document.getElementById("cat");
  ctx.drawImage(img,0,0);
  
  // Create shadow canvas
  var shadowCanvas = document.createElement('canvas');
  var shadowCtx = shadowCanvas.getContext('2d');
  shadowCanvas.width = canvas.width;
  shadowCanvas.height = canvas.height;
  document.body.appendChild(shadowCanvas);
  
  // Make it black
  shadowCtx.fillStyle= '#000';
  shadowCtx.fillRect(0,0,canvas.width,canvas.height);
  
  // Turn canvas into mask
  shadowCtx.globalCompositeOperation = "destination-out";
  
  // RadialGradient as light source #1
  gradient = shadowCtx.createRadialGradient(80, 150, 0, 80, 150, 50);
  gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
  gradient.addColorStop(1, "rgba(255, 255, 255, .1)");
  shadowCtx.fillStyle = gradient;
  shadowCtx.fillRect(0, 0, canvas.width, canvas.height);
  
  // RadialGradient as light source #2
  gradient = shadowCtx.createRadialGradient(220, 150, 0, 220, 150, 50);
  gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
  gradient.addColorStop(1, "rgba(255, 255, 255, .1)");
  shadowCtx.fillStyle = gradient;
  shadowCtx.fillRect(0, 0, canvas.width, canvas.height);
  </code></pre>