CODEWITHSUNDEEP
javascriptcanvasalphaglow
Bubbly
Bubbly

Reputation: 301

Why is my glow effect not appearing as desired?

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:

result

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?

Upvotes: 0

Views: 278

Answers (1)

Bubbly
Bubbly

Reputation: 301

It seems I've found a workaround. I've continued the use of my darkness effect but also created a new image to simulate the glow. It works as desired now.

new product

Upvotes: 1

Related Questions