[joran]

thank you :)

[joran]

I found it

this line
this._preRenderCanvas = createCanvas(this.width, this.height); @ roughly line 5044 in CanvasJS.js

overwrites the canvas instance that already exists for variable this._preRenderCanvas effectivly orphaning the old canvas (which IOS will not GC because its not size 0)

I fixed it by patching it to

if(this._preRenderCanvas){
    setCanvasSize(this._preRenderCanvas,0,0)
}
this._preRenderCanvas = createCanvas(this.width, this.height,"_preRenderCanvas");

[joran]

thanks for the response :)

can you help suggest where i might be able to find the 5th canvas element? or how to capture it… I just can’t find it and the datastructure is big…. im probably looking right past it

– Joran

[joran]

I would imagine you would just need to use some async programming

getJson("/chart1.json",(data)=>{
   make_chart(data)
})

[joran]

OK so some further information I found today (I used the safari dev tools panel which includes a canvas tab)

• The initial time a chart is created and rendered it creates 5 canvas elements that are X mb big (where X is something like width x height x 3)
• Every subsequent time that chart.render gets called a new canvas element of X mb is created, is created as far as I can tell none of the earlier ones get garbage collected
• chart.destroy();chart = null had did not release the earlier canvases memory
• I can mostly mitigate it by setting [HTMLCanvasElement].height = 0; [HTMLCanvasElement].width = 0; [HTMLCanvasElement].style.width = 0; [HTMLCanvasElement].style.height = 0 before calling destroy
• I was able to find the following 4 canvases chart.ctx.canvas, chart.overlayCanvas, chart.legend.ghostCtx.canvas, chart._preRenderCtx.canvas
• I was unable to find the 5th canvas element, so one canvas stuck around at X mb … the rest were quite small (~64bytes) after setting width and height to zero

here is the code i used to clean up before calling chart.destroy;chart = null

const ele = document.getElementById("chartContainer");
const c = chartsInstances[chartId]
c.legend.ghostCtx.canvas.style.height = 0;
c.legend.ghostCtx.canvas.height = 1;
c.legend.ghostCtx.canvas.style.width = 0;
c.legend.ghostCtx.canvas.width = 1;
c._preRenderCtx.canvas.width = 1;
c._preRenderCtx.canvas.height = 1;
c._preRenderCtx.canvas.style.width = 0;
c._preRenderCtx.canvas.style.height = 0;
const canvases = ele.querySelectorAll('canvas');
for (const canvas of canvases) {
  canvas.width = 1;
  canvas.height = 1;
  canvas.style.width = 0;
  canvas.style.height = 0;
}

[joran]

Thanks for getting back to me… Im not sure how to check the “canvas buffer memory” , however the (linked example) site only reports about 17mb of “VM memory” use-age in chrome developer tools … can you tell me how to monitor the buffer memory? or inspect it?

also i found this that might be of interest https://stackoverflow.com/a/52586606/541038 that claims the memory of canvas is not freed on reload or destroy, so you can work around it by setting the width and height of the canvas element(s?) to zero … Im not sure if i can hook into your overlay canvas or _prerenderCanvas or whatever to do this on my end (maybe i can im going to try tomorrow)

[joran]

I love canvas JS … I think we are buying the license this week, however zooming on mobile devices when you have multiple charts is an awful experience that i have not been able to get working right at all (we are now talking about implementing our own zoom slider below the chart on mobile viewports)

alot of times the shaded part does not appear , and several times i have had it somehow crash the page when doing a zoom (again only on mobile but it seems both android and ios are equally bad)

Its not a dealbreaker, and we really like canvasjs (performance is really amazing!) but it would be great if you had some ideas or insights on fixing the mobile experience