How can I create animations using HTML5 canvas?

How can I create animations using HTML5 canvas?

You can create animations using the HTML5 canvas by drawing shapes and updating them in a loop. Would you like a code example?

Yes, please provide a simple example.

Here's a basic example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 50, 50, 50);
    x += 1;
    requestAnimationFrame(draw);
}

draw();

This will animate a blue square moving across the canvas.

What if I want to add more shapes?

You can simply add more drawing commands inside the draw function. For example, you can add circles or text.