notes/Very Basic Image Movement Animation-2KFtjZNq.html

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 10000 / 6);
        };
      })();

      newX=0;
      speed=0.3;

      function animate() {

        
        newX+=speed;


        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.drawImage(imageObj, newX, 0);

        // request new frame
        requestAnimFrame(function() {
          animate();
        });
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, newX, 0);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';



      var startTime = (new Date()).getTime();
      animate(myRectangle, canvas, context, startTime);
    </script>
  </body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1