Canvas flickering

[OHammerpaw]

What's the problem you're trying to solve?

I have made a flashlight effect to search for clues but the game was starting revealed when the page loaded instead of black and didn't turn black until a mousemove occured

Post any code you think might be relevant (one fenced block per file)

`game.addEventListener('mousemove', function(e) {
    x = e.offsetX;
    y = e.offsetY;
    radius = 150;
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'black'
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);

    ctx.beginPath();
    radialGradient = ctx.createRadialGradient(x, y, 1, x, y, radius);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');

    ctx.globalCompositeOperation = "destination-out";

    ctx.fillStyle = radialGradient;
    ctx.arc(x, y, radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();

})
const gameloop = () => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = 'black'
}

const gameInterval = setInterval(gameloop, 60)

document.addEventListener('DOMContentLoaded', function () {
    gameInterval
})`

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no error message, but the black screen flickers and reveals the clues periodically

What is your best guess as to the source of the problem?

possibly the order i put the eventListeners, or maybe I am using the wrong type of Listeners

What things have you already tried to solve the problem?

I tried adding a DomContentLoad event listener to fill the canvas with black on page load

Paste a link to your repository here

[OHammerpaw]

https://github.com/OHammerpaw/The-Mothman

[OHammerpaw]

Nevermind! I figured it out! Just had to take out ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = 'black'

and put it outside the gameloop!