Bug: Memory leak when creating canvas in node

[RckMrkr]

Version

v2.0.0-beta.7

Test Case

https://github.com/RckMrkr/fabric-memory-demo
Sorry, I'm not aware of any node equivalent of jsfiddle, so I tried to create a minimal test case.

Steps to reproduce

Create canvas object in node and then force garbage collection. Do that a few times.

Expected Behavior

The memory usage should stay the same between iterations.

Actual Behavior

The (external) memory increases for each constructed canvas.
I did try the equivalent test in node-canvas, and all memory stayed the same after each creation.

[asturur]

Tomorrow ill clone the repo and try.

[RckMrkr]

I updated the repo to include what I consider the equivalent in canvas.
That is, just creating the canvas and doing nothing.

[asturur]

I'm sorry i worked on other fabricjs things instead of this.
I'm sure node code is in terrible state. I had not a normal way to try node when i start to work on this project, now i m a more bit familiar but i'm clearing out older things.

About node:
Switching to 2.0beta we upgraded to jsdom 9.x
Jsdom 9 makes the interface between js and node-canvas transparent, letting you use document.createElement('canvas') and obtaining a working canvas.

For this reason all the nodejs specific code should be deleted.
There is an open issue about that since when you do that, filters stop working ( do not work even now in node ).

The idea is to remove all the code nodejs specific code and look at the situation again.

[RckMrkr]

No problem. For now we've gone back to the stable release. As long as it's on the todo list :)

[asturur]

starting to investigate node now. Starting with issue #4231, trying to remove node code and possibly memory leak will auto resolve

[asturur]

I changed the code like this, removing the fabric.Canvas creation and creating a JSDOM canvas

const fabric = require('fabric').fabric;

function createCanvas(){
    const canvas = fabric.document.createElement('canvas');
    global.gc();

    console.log(process.memoryUsage());
    setTimeout(createCanvas, 1000);
}

createCanvas();

start:

{ rss: 82288640, heapTotal: 31162368, heapUsed: 24362232 }
{ rss: 82288640, heapTotal: 31162368, heapUsed: 24362232 }
{ rss: 82288640, heapTotal: 31162368, heapUsed: 24362232 }
{ rss: 82288640, heapTotal: 31162368, heapUsed: 24362232 }
{ rss: 82288640, heapTotal: 31162368, heapUsed: 24362232 }

after on hour:

{ rss: 83931136, heapTotal: 33259520, heapUsed: 24826432 }
{ rss: 83931136, heapTotal: 33259520, heapUsed: 24826456 }
{ rss: 83931136, heapTotal: 33259520, heapUsed: 24826480 }
{ rss: 83931136, heapTotal: 33259520, heapUsed: 24826504 }

If i create a fabric.StaticCanvas()

const fabric = require('fabric').fabric;

function createCanvas(){
    const canvas = new fabric.StaticCanvas(null, {width: 200, height: 200});

    canvas.clear();
    canvas.dispose();
    global.gc();
    console.log(process.memoryUsage());
    setTimeout(createCanvas, 1000);
}

createCanvas();

i start like this:

{ rss: 118292480, heapTotal: 66813952, heapUsed: 25611032 }
{ rss: 118513664, heapTotal: 66813952, heapUsed: 25622688 }
{ rss: 118714368, heapTotal: 66813952, heapUsed: 25649056 }
{ rss: 118935552, heapTotal: 66813952, heapUsed: 25667112 }

and after a bit i m like:

{ rss: 128290816, heapTotal: 67862528, heapUsed: 26540512 }
{ rss: 128475136, heapTotal: 67862528, heapUsed: 26551848 }
{ rss: 128692224, heapTotal: 68911104, heapUsed: 26563488 }
{ rss: 128872448, heapTotal: 66813952, heapUsed: 26577424 }
{ rss: 128614400, heapTotal: 67862528, heapUsed: 26591680 }
{ rss: 128811008, heapTotal: 67862528, heapUsed: 26607744 }

and growing

[asturur]

i can get to a decent amount of iteration inside 800k.
Still not perfect, i removed this.clear from dispose, since dispose was running a async render request and probably leaking out a bound function that has as context the canvas itself.
Situation improved, not perfect yet.

It looks like the memory consuption comes from instatiating node canvas elements.

{ rss: 118284288, heapTotal: 66813952, heapUsed: 25528360 }
{ rss: 118308864, heapTotal: 66813952, heapUsed: 25532984 }
{ rss: 118333440, heapTotal: 66813952, heapUsed: 25548568 }
{ rss: 118358016, heapTotal: 66813952, heapUsed: 25555264 }
{ rss: 118374400, heapTotal: 66813952, heapUsed: 25556504 }
{ rss: 118403072, heapTotal: 66813952, heapUsed: 25571096 }
{ rss: 118423552, heapTotal: 66813952, heapUsed: 25573360 }
{ rss: 118423552, heapTotal: 66813952, heapUsed: 25574296 }
{ rss: 118669312, heapTotal: 66813952, heapUsed: 25631136 }
{ rss: 118689792, heapTotal: 67862528, heapUsed: 25632072 }
{ rss: 118706176, heapTotal: 67862528, heapUsed: 25633312 }
{ rss: 118583296, heapTotal: 66813952, heapUsed: 25653192 }
{ rss: 118566912, heapTotal: 66813952, heapUsed: 25654432 }
{ rss: 118603776, heapTotal: 66813952, heapUsed: 25679584 }
{ rss: 118628352, heapTotal: 66813952, heapUsed: 25686424 }
{ rss: 118640640, heapTotal: 66813952, heapUsed: 25693272 }
{ rss: 118669312, heapTotal: 66813952, heapUsed: 25703576 }
{ rss: 118693888, heapTotal: 66813952, heapUsed: 25704512 }
{ rss: 118714368, heapTotal: 66813952, heapUsed: 25705752 }
{ rss: 118714368, heapTotal: 66813952, heapUsed: 25706688 }
{ rss: 118730752, heapTotal: 66813952, heapUsed: 25707928 }
{ rss: 118775808, heapTotal: 66813952, heapUsed: 25720088 }
{ rss: 118796288, heapTotal: 67862528, heapUsed: 25721328 }
{ rss: 118816768, heapTotal: 67862528, heapUsed: 25722264 }
{ rss: 118841344, heapTotal: 67862528, heapUsed: 25723504 }
{ rss: 118853632, heapTotal: 67862528, heapUsed: 25743928 }
{ rss: 118878208, heapTotal: 67862528, heapUsed: 25745168 }
{ rss: 118919168, heapTotal: 67862528, heapUsed: 25764600 }
{ rss: 118833152, heapTotal: 66813952, heapUsed: 25780360 }
{ rss: 118730752, heapTotal: 66813952, heapUsed: 25781296 }
{ rss: 118771712, heapTotal: 67862528, heapUsed: 25782536 }
{ rss: 118792192, heapTotal: 67862528, heapUsed: 25783472 }
{ rss: 118792192, heapTotal: 67862528, heapUsed: 25784712 }
{ rss: 118796288, heapTotal: 67862528, heapUsed: 25785648 }
{ rss: 118796288, heapTotal: 67862528, heapUsed: 25800824 }
{ rss: 118796288, heapTotal: 67862528, heapUsed: 25801760 }
{ rss: 118816768, heapTotal: 67862528, heapUsed: 25803000 }
{ rss: 118726656, heapTotal: 66813952, heapUsed: 25803936 }
{ rss: 118767616, heapTotal: 67862528, heapUsed: 25805176 }
{ rss: 118833152, heapTotal: 67862528, heapUsed: 25809904 }
{ rss: 118865920, heapTotal: 67862528, heapUsed: 25817312 }
{ rss: 118947840, heapTotal: 67862528, heapUsed: 25836344 }
{ rss: 118968320, heapTotal: 66813952, heapUsed: 25837584 }
{ rss: 118882304, heapTotal: 66813952, heapUsed: 25838520 }
{ rss: 118906880, heapTotal: 66813952, heapUsed: 25839848 }
{ rss: 118927360, heapTotal: 67862528, heapUsed: 25840784 }
{ rss: 118947840, heapTotal: 67862528, heapUsed: 25842024 }
{ rss: 118972416, heapTotal: 67862528, heapUsed: 25842960 }
{ rss: 118992896, heapTotal: 67862528, heapUsed: 25844200 }
{ rss: 118951936, heapTotal: 66813952, heapUsed: 25845136 }
{ rss: 118910976, heapTotal: 67862528, heapUsed: 25846376 }
{ rss: 118931456, heapTotal: 67862528, heapUsed: 25847312 }
{ rss: 118931456, heapTotal: 67862528, heapUsed: 25848552 }
{ rss: 118951936, heapTotal: 67862528, heapUsed: 25849488 }
{ rss: 118956032, heapTotal: 67862528, heapUsed: 25852096 }
{ rss: 118976512, heapTotal: 67862528, heapUsed: 25853032 }
{ rss: 119001088, heapTotal: 67862528, heapUsed: 25854272 }
{ rss: 118968320, heapTotal: 66813952, heapUsed: 25855208 }
{ rss: 118919168, heapTotal: 67862528, heapUsed: 25859016 }
{ rss: 118943744, heapTotal: 67862528, heapUsed: 25859368 }

[asturur]

#4471

Latest build plus those changes i applied in the PR, brought me in a situation in which memory was oscillating and then stabilize:

{ rss: 116736000, heapTotal: 68931584, heapUsed: 26901056 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26887312 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26888064 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26877272 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26897632 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26895760 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26906176 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26905680 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912296 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912392 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921416 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26901176 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911576 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26913784 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911816 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26901656 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26913600 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26916072 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26913216 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26902424 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26922952 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912992 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911936 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26901752 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912152 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912248 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912992 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26908432 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26943512 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26919088 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26929216 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26908976 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921392 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921488 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921112 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911040 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26920816 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26920912 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26922480 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911568 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26931328 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921368 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921464 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911280 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921680 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26922528 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921472 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26911288 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26921712 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923408 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26922808 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912888 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923288 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923384 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26924904 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26913344 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923744 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923840 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26925192 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26912744 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26925288 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923384 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923480 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26913296 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923696 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26923792 }
{ rss: 116736000, heapTotal: 68931584, heapUsed: 26924544 }