title: Start and Stop JS HTML animation with JS
body: <p>So we pretty much have this program working fine, we just need a little help, or a good pointer in the right direction on how we would start and stop the animation.  I have tried several methods and none seem to have worked.  I have spent a good amount of time online attempting to find help for the solution.  I have come to believe that the problem lies somewhere in the lines that tell the shape to move. Thank you for any help in advance.</p>
  
  <p>JS:</p>
  
  <pre><code>var myGamePiece;
  
  function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 120);
      myGameArea.start();
  }
  
  var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
      },
      clear : function() {
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
  }
  
  function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;    
      this.update = function() {
          ctx = myGameArea.context;
          ctx.fillStyle = color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.newPos = function() {
          this.x += this.speedX;
          this.y += this.speedY;        
      }    
  }
  
  function updateGameArea() {
      myGameArea.clear();
      myGamePiece.newPos();    
      myGamePiece.update();
  }
  
  function moveup() {
      myGamePiece.speedY -= 1; 
  }
  
  function movedown() {
      myGamePiece.speedY += 1; 
  }
  
  function moveleft() {
      myGamePiece.speedX -= 1; 
  }
  
  function moveright() {
      myGamePiece.speedX += 1; 
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  &lt;script type="text/javascript" src="HallettBrocatoLab2.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  canvas {
      border:1px solid #d3d3d3;
      background-color: #f1f1f1;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="startGame()"&gt;
  
  &lt;div style="text-align:center;width:480px;"&gt;
    &lt;button onclick="moveup()"&gt;UP&lt;/button&gt;&lt;br&gt;&lt;br&gt;
    &lt;button onclick="moveleft()"&gt;LEFT&lt;/button&gt;
    &lt;button onclick="moveright()"&gt;RIGHT&lt;/button&gt;&lt;br&gt;&lt;br&gt;
    &lt;button onclick="movedown()"&gt;DOWN&lt;/button&gt;&lt;br&gt;&lt;br&gt;
    &lt;button onclick="start()"&gt;Start&lt;/button&gt;
    &lt;button onclick="stop()"&gt;Stop&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;p&gt;If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>