jquery - Javascript animation speed -

i have stolen code below try work out how can build similar. not see can adjust speed of animation. i.e. code image moving left right, moving slowly.

<canvas id="canvas" width=1200 height=300></canvas>  <script> window.requestanimframe = (function(){ return  window.requestanimationframe       ||     window.webkitrequestanimationframe ||     window.mozrequestanimationframe    ||     window.orequestanimationframe      ||     window.msrequestanimationframe     ||     function( callback ){         window.settimeout(callback, 1000 / 120);     }; })();  var canvas = document.getelementbyid("canvas"), cx = canvas.getcontext("2d");  function card(x,y){ this.x = x || -300; this.y = y || 0; this.img=new image();  this.init=function(){      // makes mycard available in img.onload function     // otherwise "this" inside img.onload refers img     var self=this;      this.img.onload = function()      {         self.draw();         loop();     }     this.img.src = "f15ourbase.png";   }  this.draw = function(){     cx.drawimage(this.img, this.x, this.y); }  }  var mycard = new card(50,50); mycard.init();  function loop(){  if(mycard.x<canvas.width-0){     requestanimframe(loop); }  cx.clearrect(0, 0, canvas.width, canvas.height);  mycard.x++;  mycard.draw();  } </script> 

thank you

change window.settimeout(callback, 1000 / 120); window.settimeout(callback, 1000 / 60);

and instead of doing:

mycard.x++; 

you move 5 pixels example:

// increases 5 pixels mycard.x = mycard.x + 5; 

in html missing apostrophes canvas width , height element:

<canvas id="canvas" width="1200" height="300"></canvas> 

edit:

some mysterious way got down voted without comments(?) , because hate ended making new code attempts fix if not problems find in code author provided - added code comments relevant parts.

// animation frame gist window.requestanimframe = (function() { return  window.requestanimationframe   ||     window.webkitrequestanimationframe ||     window.mozrequestanimationframe    ||     window.orequestanimationframe      ||     window.msrequestanimationframe     ||     function( callback ){         window.settimeout(callback, 1000 / 60);     }; })();  // variable declarations var canvas = document.getelementbyid("canvas"),     cx = canvas.getcontext("2d"),     mycard;  /**  * card declaration  *    */ var card = function(x, y) {      // values after || values orginal post author wanted use     this.x = x || -300;     this.y = y || 0;     this.img = undefined;     // image used card     this.imgsrc = "f15ourbase.png";  };  /**  * initialize  *  */ card.prototype.init = function(callback) {     // self refers card    var self = this;     this.img = new image();     // onload success callback    this.img.onload = function() {         // triggering callback on successfull load        return callback();     };     // onload failure callback    this.img.onerror = function() {        // returning error message caller of method        return callback("loading image failed!");    };     // triggering image loading    this.img.src = this.imgsrc;  };  /**  * draw on canvas  *  */ card.prototype.draw = function() {      // cx (context) passed, global     cx.drawimage(this.img, this.x, this.y);  };  /**  * main loop  *  */ function loop() {      // clear canvas     cx.clearrect(0, 0, canvas.width, canvas.height);      // if card still within visible area, continue loop     if(mycard.x < canvas.width) {          // draw card         mycard.draw();          // move card 5 pixels         mycard.x = mycard.x + 5;          // schedule next loop          // "return" makes sure not executing lines below         return requestanimframe(loop);        }      // debugging, diplayed when animation done     console.log("animation finished");      };  // main program starts - creating new card instance mycard = new card(50, 50);  // initializing card mycard.init(function(err) {      // if error loading image of card, notify     if(err) {         return alert(err);     }      // no errors, can main loop     loop();  }); 

check out updated jsfiddle example

to further explore possibilities of html5 canvas recommend reading tutorials html5canvastutorials