How to make a loop with a timer in canvas in javascript?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Get the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Set the timer interval in milliseconds
const interval = 100; // 100 milliseconds

// Start the loop with the timer
setInterval(() => {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw your shapes or animations here
    // For example, draw a rectangle that moves across the canvas
    ctx.fillRect(x, 50, 50, 50);
    
    // Update the x position for the next frame
    x += 1; // or any other update logic
    
}, interval);