Meteor, fabricjs canvas on multiple templates causes memory leak - meteor

Question

I have a simple meteor app with two templates using flowrouter to navigate between them. Each template has a single HTML canvas element in it both have a fabricjs canvas assigned and a box drawn.
When I navigate between the two templates while doing a memory performance profile I see the memory continuously increase at every navigation between templates.
I expected the garbage collector to clean up the canvas vars but its not. So something keeping them in context. I can't see what I'm missing here.
Template HTML
<template name="one">
Template One
two
<div>
<canvas id="canvasONE" width="2000" height="1601"></canvas>
</div>
</template>
<template name="two">
Template Two
one
<div>
<canvas id="canvasTWO" width="2000" height="1601"></canvas>
</div>
</template>
// JavaScript
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
//////////////////////////////////////////////
// Template One
Template.one.onRendered( function(){
var canvas = new fabric.Canvas('canvasONE',{selection:true});
var rec = new fabric.Rect({
left: 0,
top: 0,
width: 120,
height: 50,
rx: 4,
ry: 4,
fill: '#64b5f6',
stroke: '#6Ebfff',
strokeWidth: 2,
originX: 'left',
originY: 'top',
lockScalingX: true,
lockScalingY: true
});
canvas.add(rec)
})
/////////////////////////////////////////////////////
// Template Two
Template.two.onRendered( function(){
var canvas = new fabric.Canvas('canvasTWO',{selection:true});
var rec = new fabric.Rect({
left: 0,
top: 0,
width: 120,
height: 50,
rx: 4,
ry: 4,
fill: '#223344',
stroke: '#6Ebfff',
strokeWidth: 2,
originX: 'left',
originY: 'top',
lockScalingX: true,
lockScalingY: true
});
canvas.add(rec)
})
Thanks...
UPDATE: after a few hours debugging, it appears to be DOM related. The meteor template removes the DOM elements but fabric could still be referencing it. The GC leaves it in memory. I added an extra function to each template to try clear the fabric canvas.
Template.one.onDestroyed( function(){
rec = null;
canvas.clear();
canvas.dispose();
$(canvas.wrapperEl).remove()
})
but still seeing the memory leak continue.

Answer 1

The problem was resolved.
I moved the var canvas definition outside of the function blocks to the root of the file, In meteor this makes it global to the scope of the file, not a true application global. The fabricjs canvas clear() dispose() were from a recommendation by one of the authors of fabric posted as an answer to someone else's question,