Home/ Questions/Q 8358343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T10:45:52+00:00

So, I’m looking to make a game involving light. It will allow you to

  • 0

So, I’m looking to make a game involving light. It will allow you to move torches and light bulbs and such around, to reveal the rooms you are in.

I want to accomplish this by (perhaps) having a background image of the room on a div, and then having another div inside that with a black background, to simulate the darkness. Then, as the player moved light sources around, removing the bits of the black background (or making them transparent) so you can see the background through them, making them look like they are lit up.

I’ve tried several methods – the only one so far that has worked was using lots of 1x1px black divs as ‘pixels’ and making them transparent programatically, but that was really (really) slow.

I’m fairly sure canvas has a solution, and this JS Fiddle is a step in the right direction, but I want to display a background image, not just “light”.

Any advice or ideas will be more than welcome. I’ll put your username in the credits 😉

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You will be able doing so by using Compositing with a globalCompositeOperation other than source-over.

    The values destination-out or even xor seem to be what you need, when drawing with a transparent (rgba) color. I’ve built this fiddle for a demonstrations: painting with yellow (alpha: 0.5) on a black rectangle in a canvas with a red background (And white, with yellow background).

    Use destination-out with an alpha of 1 to completely make the stroked/filled area transparent. Use a lower alpha, and you will be able to dim the already painted areas, with a possible shade of some color.

    • 0