title: html5 canvas memory leak
body: <p>I am developing a camera based SPA. When I'm trying to resize the image it cause to a memory leak.</p>
  
  <p><strong>without executing resize</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Q8ikR.jpg" alt="memory snapshot at beginning"></p>
  
  <p><strong>first executing resize</strong></p>
  
  <p><img src="https://i.stack.imgur.com/rmZAR.jpg" alt="enter image description here">.</p>
  
  <p><strong>second executing resize</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Brvaw.jpg" alt="enter image description here"></p>
  
  <p>The memory never go down until I do refresh.</p>
  
  <p>It is strange the same app <a href="http://shitu.baidu.com" rel="nofollow noreferrer">http://shitu.baidu.com</a> does release the memory.
  Here is the my resize function.</p>
  
  <pre><code>var useRightPen = function (img, pre_img_wid, pre_img_hei, aft_img_wid, aft_img_hei, callback) {
      var canvas = document.createElement('canvas');
      var ctx=canvas.getContext('2d');
      canvas.setAttribute("height", aft_img_hei);
      canvas.setAttribute("width", aft_img_wid);
  
      var orientation = 1;
      if (!!(/http/.test(img.src))) {
            //memory keeps the same before the drawimage
          canvas.getContext('2d').drawImage(img, 0, 0, aft_img_wid, aft_img_hei);
           //memory goes up after the draimage
          callback(canvas.toDataURL('image/jpeg'), aft_img_wid, aft_img_hei);
      }
      canvas = null;
  }
  </code></pre>
  
  <p>Appreciate for everyone.</p>
  
  <p><strong>---update--06-11--2015</strong></p>
  
  <p>I make one fildde <a href="http://jsfiddle.net/onTheRoad/dc17guba/" rel="nofollow noreferrer">http://jsfiddle.net/onTheRoad/dc17guba/</a></p>
  
  <p>The demo will reset the image src after every pick.Memory goes high on its way.
  <img src="https://i.stack.imgur.com/uPiBW.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/bdL6x.jpg" alt="enter image description here"></p>