title: forcing canvas update
body: <p>Is there any way to force a canvas to update? I'd like to display a loading message but the game locks up loading before it displays. I feel like I need to tell the canvas to "draw now" before load function is called, but maybe there is a another way...</p>
  
  <p>EDIT:</p>
  
  <p>ok, just to be clear i've written a very small dirty script (best i can do in my tea break :P) to demonstrate what i'm trying to over come. Here:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload="init();"&gt;
      &lt;canvas id="cnv" width="300" height="300"&gt;
          canvas not supported.&lt;br/&gt;
      &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;  
  
      var ctx;
  
          function init()
      {
          var canvas = document.getElementById('cnv');
          ctx = canvas.getContext('2d');
  
          ctx.fillStyle = "rgb(255, 0, 0)";
          ctx.fillRect(0,0,300,300);
  
          FakeLoad();
  
          ctx.fillStyle = "rgb(0, 255, 0)";
          ctx.fillRect(0,0,300,300);
      }
  
      function FakeLoad()
      {
          var d = new Date();
          var start = d.getTime();
  
          while (new Date().getTime() - start &lt; 5000)
          {
              //emulate 5 secs of loading time
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>now the idea is the script should draw a red square to show its "loading" and a green square when finished. but all you will see if you copy that into a html file is a pause of 5 seconds then the green appears, never red.  In my head I wanted to have some command like ctx.Refresh(); after i draw the green square to tell it "update now! don't wait!" but judging from replies this is not the way to handle the problem.</p>
  
  <p>what should I do? :)</p>