javascript - WebGL: Reuse assets when reusing a canvas -

i'm writing small tool allows developers render 3d content on canvas using webgl.

it used specifying view , camera, simplified example:

displayview( '#mycanvas1', [0, 5, 2] ); 

which might called several times display in several canvases:

displayview( '#myfrontcanvas', [0, 5, 2] ); displayview( '#mysidecanvas', [5, 0, 2] ); 

or might called multiple times on same canvas change view:

displayview( '#mycanvas', [0, 5, 2] ); // later displayview( '#mycanvas', [5, 0, 2] ); // later displayview( '.thiscanvasisactuallythesameoneagain', [5, 0, 0] ); 

each time it's called on new canvas, need set buffers, shaders, etc. when called on used canvas, should re-use old buffers , shaders. don't think it's possible share resources between contexts need duplicate & keep track of them myself.

my thought store buffers, shaders, etc. in array each time called on canvas, search array in later calls. can't store canvas objects in array because mess garbage collection, xy problem is: can check if particular shader, program or buffer belongs particular context? correct in belief when canvas removed, shaders , buffers removed even though still referenced in array?

as title suggests, i'm open better solutions full problem.

as other javascript objects, can add property context object itself, stick around long context does. long don't happen use same name else, work fine, use nice unique name.

something like:

function initializestorage(context) {     return { ... }; }  function getstorage(context) {     if (!('_daveslibraryprivatestorage' in context)) {         context._daveslibraryprivatestorage = initializestorage(context);     }     return context._daveslibraryprivatestorage; }  context.useprogram(getstorage(context).program); 

future versions of javascript make possible in clean way using weakmap (available in firefox , in chrome behind flag!) or private symbols, consider interim kludge.