title: How do I use setTimout in Coffeescript within a loop
body: <pre><code>window.onload = -&gt;
  
    boxOrig1 = 10
    boxOrig2 = 30
    canvasW = 400
    canvasH = 300
  
    ctx = $("#canvas")[0].getContext('2d');
  
    draw = (origin,dimension) -&gt;    
      ctx.clearRect(0, 0, canvasW, canvasH)
      ctx.fillStyle = 'rgb(200,0,0)'  
      ctx.fillRect(origin + boxOrig1, boxOrig1, dimension, dimension)  
      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'  
      ctx.fillRect(origin + boxOrig2, boxOrig2, dimension, dimension)
  
    for m in [10..100] by 10
      t = setTimeout (-&gt; draw(m, 150)), 1000 
      t.clearTimeout
  #     draw(m,150)
  #     alert m
  </code></pre>
  
  <p>As an exercise, the code above is meant to draw a little design on a canvas, pause for a second, then redraw it again 10 pixels to the right.  </p>
  
  <p>I can see that the mechanics work fine when I interrupt the loop with an alert (as in those last two commented lines), but I'm not getting the expected behavior with the setTimeout function.  The design just appears at the rightmost position after the timeout, skipping the incremental steps in between.  </p>
  
  <p>I've tried many different ways of doing this from other examples, but it's just melting my brain.  Any suggestions?</p>