title: javascript type issue: Uncaught TypeError: Object 0 has no method 'draw'
body: <p>Just experimenting with JS + canvas and i seem to have hit a wall.
  the "aim" of my minimal application is to click at any random place on the canvas, press the draw button and squares draw where you clicked.</p>
  
  <p>coming from an OO background... i (tried) to use OO, which in js i dont fully have the grasp of. </p>
  
  <p>but basically i have a custom Square object</p>
  
  <pre><code>function Square(l, w, x, y) {
  
      this.length = l;
      this.width  = w;
      this.posx   = x - l/2;
      this.posy   = y - w/2;
  
      //test
      //ctx.fillStyle = "rgb(20,0,0)";
      //ctx.fillRect(this.posx,this.posy,this.length,this.width);
  
  
      this.draw = function() {
  
          ctx.fillStyle = "rgb(20,0,0)";
          ctx.fillRect(this.posx,this.posy,this.length,this.width);
  
      }
  }
  </code></pre>
  
  <p>which i add to an array every time the user clicks...
  here is the event handler for when i click on the canvas.</p>
  
  <pre><code>function addTo(evt) {
  
      pos = getMousePos(evt);
      var sq = new Square(50, 50, pos.x, pos.y);
      list.push(sq);
  
      output.innerText = "("+sq.posx+","+sq.posy+")";
  }
  </code></pre>
  
  <p>and here is where i (attempt) to draw the squares.</p>
  
  <pre><code>function renderStack() {
  
      //alert(list);
      canvas.width = canvas.width;
      for(var o in list) o.draw();
  
  }
  </code></pre>
  
  <p>and this is the error:</p>
  
  <pre><code>Uncaught TypeError: Object 0 has no method 'draw'
  </code></pre>
  
  <p>i get a similar error trying to access the variables for that object.
  It seems that after i add them to the list js forgets about what type they are? - because when i print the array it is full of [Object object]'s</p>
  
  <p>thanks.</p>