I'm currently making a 2D game in Javascript, but I want to the game to have different lighting levels, for example, if I were to create a day and night cycle. However, I want to be able to cut holes in the lighting/foreground, or do something so that I can make certain parts of the screen lit up, for example like a flashlight or candle. Note: I'm also using the P5.js library.
The most obvious idea that came to mind for going about in creating a foreground is just creating a rectangle with some opacity that covers the entire screen. This is good, but how am I supposed cut through this? Obviously, the code below won't work because I'm just layering on another element, and the rectangle is still obstructed and not perfectly clear.
function setup() {
noStroke();
createCanvas(400, 400);
}
function draw() {
background(255); //white
fill(255, 0, 0);
rect(200, 200, 25, 25); //Example object
fill(150, 150, 150, 100); //Gray with opacity
rect(0, 0, 400, 400); //Darkness covering entire screen, foreground
fill(255, 255, 255, 100)
ellipse(mouseX, mouseY, 50, 50); //object that is supposed to penetrate foreground.
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>How would I go about doing this? I want this to work not only with just a plain background and simple shapes, but with images as well. Is there a way to cut holes in shapes, or do I need to use something else, like a shader or mask?
Thanks.