Canvas Size
// 🟠 Example: Moving Circle Demo // This program shows a circle that moves left and right. let x = 50; // circle's x position let dx = 2; // how much it moves each frame function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas // Draw orange circle ctx.beginPath(); ctx.arc(x, 200, 40, 0, Math.PI * 2); ctx.fillStyle = "orange"; ctx.fill(); // Move circle x += dx; if (x > canvas.width - 40 || x < 40) dx = -dx; // bounce! requestAnimationFrame(draw); // call draw() again for animation } draw(); // start drawing!
▶ Run
🧹 Clear
📘 Easy Examples...
Sine Wave 🌊
Cosine Wave 💫
Bouncing Ball 🏀
Rainbow Waves 🌈