I am working on a game in which I am trying to simulate a torchlike glow effect around a player. To do this, I am first drawing my player, and then a translucent overlay on my canvas. This overlay gives a feeling of darkness, dimming the screen. However, I also want to make the area around the player brighter, either with a glow or by removing the darkness in specific areas of my canvas (in this case, the position of my player). However, when I try to do so, my entire canvas becomes the color of my glow, and the effect is not as desired. Here is what happens:
Additionally, here is the code I am using to create the glow effect:
glow() {
canv.shadowBlur = 75;
canv.shadowColor = "orange";
canv.globalAlpha = 0;
canv.fillRect(this.x, this.y, this.width, this.height);
}
And the darkness effect on my canvas (please note, these are methods in two separate objects):
darkness_effect() {
canv.globalAlpha = 0.6;
canv.shadowBlur = 0;
canv.shadowColor = "black";
canv.fillStyle = "black";
canv.fillRect(0, 0, canvas.width, canvas. height);
}
And this is the order of the function calling (the other functions can be ignored, they have no effect on the canvas display):
function animate() {
game.draw_background();
game.tick_update();
player.update();
player.animate();
game.darkness_effect(); // !
player.glow(); // !
requestAnimationFrame(animate);
}
How can I fix this? I only want a circular glow around my player's position, not for the entire screen to be dark orange.
P.S. If all else fails, I'm also willing to try a different method to attain my desired result. Does anyone know of any other ways to do this?
