title: How do I make this animation move from right to left?
body: <p>I have been learning some JavaScript and this was one of the exercises. It works just fine, but one of the challenges was to make the animation go from right to left and I have been stuck in there for a while. I'm sure is really simple but everything I have tried just doesn't work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  
  var Test = {
    canvas: undefined,
    canvasContext: undefined,
    rectanglePosition: 0
  };
  
  Test.start = function() {
    Test.canvas = document.getElementById("myCanvas");
    Test.canvasContext = Test.canvas.getContext("2d");
    Test.mainLoop();
  };
  document.addEventListener('DOMContentLoaded', Test.start);
  Test.update = function() {
    var d = new Date();
    Test.rectanglePosition = d.getTime() % Test.canvas.width;
  };
  Test.draw = function() {
    Test.canvasContext.fillStyle = "green";
    Test.canvasContext.fillRect(Test.rectanglePosition, 100, 50, 50);
  
  };
  Test.mainLoop = function() {
    Test.clearCanvas();
    Test.update();
    Test.draw();
    window.setTimeout(Test.mainLoop, 1000 / 60);
  };
  
  Test.clearCanvas = function() {
    Test.canvasContext.clearRect(0, 0, Test.canvas.width, Test.canvas.height);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="testArea"&gt;
    &lt;canvas id="myCanvas" width="800" height="480"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>