Canvas How to - Move image along x axis

Question

We would like to know how to move image along x axis.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.addEventListener('load', function () {
  var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
  img.src = 'http://www.java2s.com/style/download.png';
  img.addEventListener('load', function () {
    var interval = setInterval(function() {
      var x = 0, y = 0;
      return function () {<!--  w  ww. j  a  v a  2s .c  om-->
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, x, y);
        x += 1;
        if (x > ctx.canvas.width) {
          x = 0;
        }
      };
    }(), 1000/40);
  }, false);
}, false);
//]]>  
</script>
</head>
<body>
  <canvas id="myCanvas" height="200" width="800" />
</body>
</html>

The code above is rendered as follows: