var context; var x=0; var y=0; var xShift=2; var yShift=5; var width, height; canvas = document.getElementById('myCanvas'); if(!canvas || !canvas.getContext) return; context = canvas.getContext('2d'); if(!context || !context.putImageData) return; context= canvas.getContext('2d'); width=canvas.width; height=canvas.height; setInterval(draw,20); function draw() { context.clearRect(0,0,300,300); context.beginPath(); context.fillStyle="green"; context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); if(x+xShift > width || x+xShift < 0) xShift=0-xShift; if(y+yShift > height || y+yShift < 0) yShift=0-yShift; x+=xShift; y+=yShift; }
<canvas id="myCanvas" height="300" width="300"> Sorry, your browser doesn't support canvas! </canvas>