Animation in Canvas
Canvas also supports animations by repeatedly redrawing shapes at different positions:
Example:
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
let x = 0;
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'green';
context.fillRect(x, 50, 50, 50);
x += 2;
requestAnimationFrame(draw);
}
draw();
</script>
- The
draw
the function is called initially. - Inside
draw
, the canvas is cleared to prepare for the new frame. - A green rectangle is drawn at the current position
(x, 50)
. - The
x
the variable is incremented by 2, moving the rectangle to the right. requestAnimationFrame(draw)
schedules thedraw
function to be called again, creating a loop.- This loop continues, clearing the canvas and redrawing the rectangle at a slightly shifted position each time, resulting in the animation of the rectangle moving to the right.