HTMLCanvasElements memory leaking with fabric.js

help
1

Hi,

Does anyone have experience using fabric.js in multiple templates?. I have a simple test app using flowrouter and blaze with two identical templates (apart from the names) and the lamatyus:fabric package to give me the fabric.js canvas library.

<template name="canvas one">
    PBS Canvas Blue Square<br>
    <div>
        <canvas id="canONE"  width="2000" height="1601"></canvas>
    </div>
</template>

Template.canvasone.onCreated( function(){
    console.log('canvas created')

})
.....
// javascript file
Template.canvasone.onRendered( function(){
     console.log('canvas rendered')   

     canvas = new fabric.Canvas("canONE")
})

Template.canvasone.onDestroyed( function(){
    canvas.clear()
    canvas.dispose();
})

I navigate between these repeatedly and the memory use just keeps climbing.

In the safari timeline view I can record and take snapshots, when I look at a snapshot there as many HTMLCanvasElements as navigations all 48mb in size!

Something is referencing the DOM - script preventing the GC from freeing these, these seem to become detached DOM elements.

If I comment out the canvas = new fabric() line the memory leak is far less but the canvas elements are still not GC’d

Anyone got any thoughts please?

2

I notice that canvas is declared as a global variable. Even if it’s not the cause of your memory issue, that’s bad practice.

3

hi,

yes I tried it global, in the template root as a var canvas and as a this.canvas. The canvas scope doesn’t seem to matter the memory still grows.

I have been studying the chrome dev tools heap snapshots etc. I can see the “yellow” marked detached HTMLCanvas DOM entries but can’t understand what is referencing them.

Thanks

4

I’m curious why you’re using the lamatyus:fabric package, when this looks like a good case for using the NPM package directly - especially as it has no github repo linked from atmosphere.

It may not be version-related at all, but the classic problem with all these thin-npm-wrapper packages is they get out of date, because they’re rarely maintained.

5

yes thats a good point, the project started a while ago and we used lamatyus. fabric.js have recently moved to version 2.x and lamatyus is late 1.x version. I’m just a bit concerned about moving to their new version in case this introduces other unexpected issues.

6

detatched
detatched1932×872 170 KB

I just commented out all the fabric code so I basically just have two templates with canvas on each. I navigate between both a few time. and look in the timeline dev tool and see this…

Here the size is now very small 32b on each its 48mb with the canvas code in place. So something is keeping the DOM active I can’t relate what this tells me back to the code though?