title: moving an image across a html canvas
body: <p>I am trying to move an image from the right to the center and I am not sure if this is the best way.</p>
  
  <pre><code>var imgTag = null;
      var x = 0;
      var y = 0;
      var id;
  
      function doCanvas()
      {
          var canvas = document.getElementById('icanvas');
          var ctx = canvas.getContext("2d");
          var imgBkg = document.getElementById('imgBkg');
          imgTag = document.getElementById('imgTag');
  
          ctx.drawImage(imgBkg, 0, 0);
  
          x = canvas.width;
          y = 40;
  
          id = setInterval(moveImg, 0.25);
  
      }
  
      function moveImg()
      {
          if(x &lt;= 250)
              clearInterval(id);
  
          var canvas = document.getElementById('icanvas');
          var ctx = canvas.getContext("2d");
  
          ctx.clearRect(0, 0, canvas.width, canvas.height);
  
          var imgBkg = document.getElementById('imgBkg');
          ctx.drawImage(imgBkg, 0, 0);
  
          ctx.drawImage(imgTag, x, y);
  
          x = x - 1;
      }
  </code></pre>
  
  <p>Any advice?</p>