// Example code for requestanimframe by KK window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60 ); }; })(); var canvas, context; var imageObj = new Image(); imageObj.src = "http://bluelemoncode.com/Demo/car.jpg"; var date = new Date(); var lastTime = date.getTime(); var startx = 0; init(); animate(); function init() { canvas = document.createElement( 'canvas' ); canvas.width = 456; canvas.height = 456; context = canvas.getContext( '2d' ); document.body.appendChild( canvas ); } function animate() { requestAnimFrame( animate ); draw(lastTime); } function draw(lastTime) { var time = new Date().getTime(); var x = startx + ((time - lastTime)/1000); var y = 40; startx = x; lastTime = time; context.fillStyle = 'rgb(255,255,255)'; context.fillRect( 0, 0, 455, 455 ); context.drawImage(imageObj, x,y); }