title: 2 images animated using Javascript
body: <p>From doing research and asking for help I have so far built an animation moving from left to right using the code in the JSFiddle below. This loops every 20 seconds.</p>
  
  <p><a href="http://jsfiddle.net/a9HdW/3/" rel="nofollow">http://jsfiddle.net/a9HdW/3/</a></p>
  
  <p>However now I need a second image that moves from right to left and for this to automatically trigger straight after the first image has completed its animation.
   If you could do this that would be amazing.</p>
  
  <p>Thanks In Advance</p>
  
  <pre><code>&lt;canvas id="canvas" width="1600" height="300"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  window.requestAnimFrame = (function(){
  window.requestAnimationFrame       ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame    ||
  window.oRequestAnimationFrame      ||
  window.msRequestAnimationFrame     ||
  function( callback ){
      window.setTimeout(callback, 1000 / 60);
  };
  })();
  
  var canvas = document.getElementById("canvas"),
  cx = canvas.getContext("2d");
  
  function Card(x,y){
  this.x = x || -300;
  this.y = y || 0;
  this.width = 0;
  this.height = 0;
  this.img=new Image();
  
  this.init=function(){
  
  // this makes myCard available in the img.onload function
  // otherwise "this" inside img.onload refers to the img
  var self=this;
  
  this.img.onload = function() 
  {
      // getting width and height of the image
      self.width = this.width;
      self.height = this.height;
      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 + myCard.width) &lt; canvas.width){
  requestAnimFrame(loop);
  } else {
  
    setTimeout(function() {
     // resetting card back to old state
     myCard.x = 50;
     myCard.y = 50;
     // call the loop again
     loop();
  }, 20000);
  
  }
  
  cx.clearRect(0, 0, canvas.width, canvas.height);
  
  myCard.x = myCard.x + 15;
  
  myCard.draw();
  
  }
  </code></pre>
  
  <p></p>