title: Free allocated by <canvas/> memory on page reload
body: <p>How can I free allocated memory by &lt;canvas&gt; in the following example:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body id="body"&gt;
      &lt;canvas id="canvas" width=3000 height=2000/&gt;
      &lt;script&gt;
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillText("hao ar iu?", 20, 20);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to set <em>var canvas</em> to null (canvas = null), to delete canvas (delete canvas) or to dynamically create canvas and append it to the "document" root, after remove it that way:</p>
  
  <pre><code>&lt;div onclick=reload()&gt;CLICK TO RELOAD PAGE&lt;/div&gt;
  &lt;script&gt;
    function reload(){
      body.removeChild(canvas);
      location.reload();
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Nothing changes, the allocated memory gets larger and larger with every single page reload until my browser occupy too much of CPU RAM memory. Sometimes the browser crashes. Sometimes the garbage collector cleans up some of variables out scope. But it lets too much of memory occupied. I use Chrome version 25. Are there any means to free the &lt;canvas&gt; memory or to provoke early garbage collection?</p>