Trying to update timer within canvas (JS)

Question

I'm trying to re-create a game inspired by the minigame in New Super Mario Bros. called "Wanted!". Here's the situation:

I'm trying to have a countdown timer of 10 seconds, using JavaScript. When the timer counts down, I want the timer to refresh every second that passes. But as you'll see in the picture below, the timer writes over itself. I'm trying to do this with pure JavaScript, but HTML will also work if it is a preferred method. Keep in mind that this is a still frame. Here's what I have:

function drawTimer() {
        var timeLeft = 10; // Set seconds
        let countDown = setInterval(function() {
            // Check if we reached 0.
            if (timeLeft <= 0) {
                alert("Time's up!");
                isWinner = false;
                document.location.reload(); // reload the page
                clearInterval(countDown);
            }
            else { // Less than 10,
                requestAnimationFrame(drawTimer);
                ctx.beginPath();
                ctx.font = "16px Arial";
                ctx.fillStyle = "#FFFFFF";
                ctx.strokeStyle = "#000000";
                ctx.fillText("Time left: " + timeLeft, 200, 20);
                ctx.closePath();
            }
            timeLeft -= 1;
        }, 1000);
}

Here's what it looks like:

munleashed · Accepted Answer · 2021-10-28 21:35:50Z

1

Not sure if you understand what canvas do. Its just a "canvas", as it says, and you draw pixels.

For example, if you draw something and you want to move it somewhere, you should draw new pixels on the place where that should be moved and erase previous pixels. Its like you are drawing a circle on a paper, and wanna draw it (move it) to another place (that would be another frame), you should erase current circle and draw a new one on another place.

In your case, for showing timer text you draw pixels, each drawn pixel will stay on canvas unless you erase it at some point. You should find a way to erase it, but easier would be to have an element in html that is above canvas (absolute position) and you will not have a problems with repainting.

answered Oct 28, 2021 at 21:35

munleashed

1,6851 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brakke Baviaan Over a year ago

Yup. Some games I read about don't erase the pixels, rather they redraw the entire canvas calculated based on the input of the user and previous frame data.

munleashed Over a year ago

That is correct. Because mathematically its really hard to calculate which pixels to erase in a new frame. Thats way they redraw the entire canvas, or have a "multilayered" canvas so they track shapes using colors etc.

Collectives™ on Stack Overflow

Trying to update timer within canvas (JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related