Canvas class memory leak/increase

[jfsiii]

Pages which create a Canvas instance (new Canvas()) can be seen to have an increase in memory (at least in FF/Mac) which is proportional to the size of the created Canvas.

I first observed this when working with the Spacetree. The behavior can be seen on the example page but is small (~2MB) because of the size of the Canvas. Altering the example to use a 1000px X 1000px canvas will show a more dramatic (~25-50 MB) increase.

Seeking to isolate the cause and symptoms, I created these 3 pages:

• http://jfsiii.org/testpages/tagcanvas.html - 4000px X 4000px Canvas using only the canvas tag
• http://jfsiii.org/testpages/classcanvas.html - 4000px X 4000px Canvas using new Canvas()
• http://jfsiii.org/testpages/classcanvasgc.html - 4000px X 4000px Canvas using new Canvas() and deleting the variable when the page unloads

[JamesKhoury]

this is an issue with the code provided.

You are declaring an object in the global scope. It therefore doesn't lose reference.

wrap it instead in an IIFE

(function(undefined){
  var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
     //width and height for canvas. Default's to 200.
     'width': 4000,
     'height':4000,
     //Canvas styles
     'styles': {
      'fillStyle': '#ccddee',
      'strokeStyle': '#772277'
     }
  });
})();

Also seems that I could repro this in Firefox but not Google Chrome.

Even though this is three years old I had a similar issue to this and fixed it this way.

[philogb]

Everything is already wrapped inside of a FE when the script is built: https://github.com/philogb/jit/blob/master/build.py#L31