title: How do I make this animation work?
body: <p>I wanted a rectangle to move horizontally..However, the rectangle is not animating..How do I fix this?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var interval = 10;
  var x=0;
  var y=0;
  var rect = null;
  var context ;
  var canvas;
  
  function Rectangle(x, y, width, height, borderWidth) {
    this.x=x;
    this.y=y;
    this.width = width;
    this.height = height;
    this.borderWidth = borderWidth;
  }
  
  function DrawRects(){
    myRectangle = new Rectangle (250,70,100,50, 5);
  
    context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height)
    context.fillStyle="#8ED6FF";
    context.fill();
    context.lineWidth=myRectangle.borderWidth;
    context.strokeStyle="black"; 
    context.stroke();
  }
  
  function updateStageObjects() {
    var amplitude = 150;
    var centerX = 240;    
    var nextX = myRectangle.x+ 10;
  
    myRectangle.x = nextX;    
  }   
  
  function clearCanvas() {
    context.clearRect(0,0,canvas.width, canvas.height);
  }
  
  function DrawRect(){
    alert("Test1");
    setTimeout(CheckCanvas,10);
  
    //clearCanvas();
  
    updateStageObjects();
  
    DrawRects();
    alert("Test2");
  }
  
  function CheckCanvas(){
    return !!(document.createElement('canvas').getContext);
  }   
  
  function CheckSound(){  
    return !!(document.createElement('sound').canPlayType)
  }
  
  function CheckVideo(){
    return !!(document.createElement('video').canPlayType)
  }
  
  function Checkstorage(){
    return !!(window.localStorage)
  }
  
  function CheckVideo(){
    return !!(document.createElement('video').canPlayType)
  }
  
  function DrawCanvas(){
    if (CheckCanvas()){
      canvas = document.getElementById('Canvas');
      context =canvas.getContext('2d');
  
      $('#Result').text('Canvas supported...');
      $('#Result').text($('#Result').text()+'Sound supported...'+CheckSound());
      $('#Result').text($('#Result').text()+'Video supported...'+CheckVideo());   
      $('#Result').text($('#Result').text()+'Storage supported...'+Checkstorage());
  
      DrawRects();
      setInterval(DrawRect(), 10);
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;canvas id="Canvas" width="800px" height="800px" onclick="DrawCanvas()"&gt; Nor supported&lt;/canvas&gt;
  </code></pre>