<!DOCTYPE html>
<html><head><title>Html5 Canvas Animations</title></head><body onLoad="init()"> <canvas id="c" width="1200" height="960"> </canvas> <script> var speed=30; var x=10; var dx=6; var ctx; function init(){ ctx=document.getElementById("c").getContext("2d");; ctx.save(); setInterval(draw,speed); } function draw(){ if(x>960){ x=10; ctx.beginPath(); } ctx.clearRect(0,0,980,800); ctx.lineWidth="2"; ctx.lineJoin="round"; ctx.strokeStyle='#e0c'; for(var i=0;i<100;i+=10){ ctx.moveTo(x-dx,50*Math.sin(Math.PI*(x-dx)/90)+200+i*3); ctx.lineTo(x,50*Math.sin(Math.PI*x/90)+200+i*3); ctx.stroke(); } x+=dx; } </script></body></html>