title: Random shapes appearing on canvas
body: <p>I would like some help on making shapes randomly appear on my canvas and staying in the position they appear. Currently i have a button which when pressed three shapes appear, but I would like these three shapes to appear continously around the canvas until the button is pressed again.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="example1" width="800" height="600"&gt;
      &lt;p class="canvas-no-support"&gt;Your Browser Does Not Support HTML5 canvas!&lt;/p&gt;
  &lt;/canvas&gt;
  
  &lt;button onclick="start()"&gt;Go!!&lt;/button&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>function start() {
      setInterval(draw, 100);
  }
  
  function draw() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('example1');
  
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
  
          var context = canvas.getContext('2d');
  
          //Red Square
  
          function dSqu() {
              context.strokeStyle = "rgb(255,215,0)"; //Yellow Outline
              context.fillStyle = "rgb(200,0,0)";
              context.lineWidth = 4; //Stroke Thickness
              context.fillRect(75, 75, 137, 137);
              context.strokeRect(75, 75, 137, 137); //Outline
          }
  
          function dCir() {
              //Purple Circle
              context.beginPath();
              context.arc(380, 137, 100, 0, Math.PI * 2, true);
              context.fillStyle = "rgb(200,80,200)";
              context.fill();
              context.lineWidth = 4; //Stroke Thickness
              context.strokeStyle = "rgb(255,215,0)";
              context.stroke();
          }
  
          function dTri() {
              //Green Triangle
              context.beginPath();
              context.fillStyle = "rgb(0,200,0)";
              context.moveTo(100, 100);
              context.lineTo(300, 100);
              context.lineTo(200, 200);
              context.lineTo(100, 100);
              context.fill();
              context.strokeStyle = "rgb(255,215,0)";
              context.stroke();
              ctx.closePath();
          }
  
          dSqu();
          dCir();
          dTri();
  
      } else {
          document.write('Your Browser does not support HTML5 Canvas.');
      }
  }​
  </code></pre>