title: HTML Canvas does not refresh (2)
body: <p>I was told to ask a more specific question etc....</p>
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;canvas id=&quot;RoomCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;&gt;
  &lt;!-- ************************************* --&gt;
  &lt;!-- The wall is always here               --&gt;
  &lt;!-- ************************************* --&gt; 
  Your browser does not support the HTML5 canvas tag.
  &lt;/canvas&gt;
  &lt;script&gt;
  var c = document.getElementById(&quot;RoomCanvas&quot;);
  var ctx = c.getContext(&quot;2d&quot;);
  
  ctx.clearRect(0, 0, 300, 200);
  
  alert(&quot;clear&quot;);
  
  
  
  doWall(&quot;blue&quot;, 0);
  
  x = 0;
  for (let i = 0; i &lt; 10000; i++) {
    x = x + i;
  }
  
  alert(&quot;left there&quot;);
  
  doWall(&quot;pink&quot;, 47);
  
  
  function doWall(theColor, xlocation){
    ctx.beginPath();
       ctx.moveTo(xlocation, xlocation);
       ctx.lineTo(xlocation, 100);
    ctx.closePath();
    ctx.lineWidth = 8;
    ctx.strokeStyle = theColor;
    ctx.stroke();
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>The Problems:
  1 - clear rectangle does not work until the program stops running!
  2 - the blue line does not appear until the program stops running!
  3 - the pink line does not appear until the program stops running!</p>
  <p>My application needs to put the blue line out when the program is doing something.  When the program finishes what it is doing the pink line is to be displayed along with the blue line.</p>
  <p>What good is a canvas that does not show anything until all the drawing is done?</p>
  <p>I hope this better describes the problem.  Any help will be greatly appreciated.</p>
  <p>Charlie</p>