Total canvas memory exceeds the maximum limit (224mb)

[RitterD]

Hi,

I'm using your cancas gauges to visualize temperature and rpm of a sensor. When the canvas gauges reaches 224mb the gauges vanishes and the app stops working a bit later.

Is it possible to extend the memory or clear the cash? Would be sad to to step back to progressbars because the gauges looking realy professional...

This error occurs first in the linear and then in the radial gauge.

I'm running tests on an iPhone latest version (12.0). Thank you very much in advance.

[avijeetnpi]

Try not to debug(disconnect USB cable) and repeat what you are doing. It should work!

[RitterD]

sorry for not responding so far. I tryed it without debugging as well on iOS and Android same result... Did you face the same problem @avijeetnpi ?

[avijeetnpi]

@RitterD Interesting!! This problem went away when I was not debugging. I ended up calling the update function for gauge to update the data. If you are calling the new RadialGauge to update then this problem will happen as cache is not being cleared(my assumption) and Gauge is being redrawn on the canvas. Update method doesn't redraw on canvas so it effective method in saving memory.

Declare var gaugeRef = null as global variable.

if (gaugeRef === null) { gaugeRef = new RadialGauge({ renderTo: 'xyzdiv', value : 10

            }).draw();
        }

else{ gaugeRef.update({ value: 12 }); }

If this code doesn't work for you, please share your code and I'll help you out. I have invested lot of time in this gauge so have good idea about lot of things.

[Mikhus]

Hi, guys. Sorry for been so late on your thread, but here are my thoughts. First of all you should never instantiate gauge more than once per canvas element. Once gauge is instantiated you can access it via document.gauges collection. There is no actual need to define a global var. All gauges always available through a gauges collection on your document. And yes, when you need to redraw a gauge (even in case you want to modify its look-and-feel) update() function is a right place to go with. It was especially designed for this purpose. By the way if you need to update value only there is no need to do more than gauge.value = newValue.

[avijeetnpi]

@Mikhus Yup, I agree with your opinion. I am using this gauge as a component in Vue in a Cordova app and gauge instance is lost when I move to other page so that's why had to draw the gauge every time when user navigates to the gauge page. Can you share something more about how to make it perform better as if in my case user keeps navigating to and fro between different pages, eventually gauges will disappear in 5-6 hours(Worst case Scenario)

[avijeetnpi]

@Mikhus I just realized you are the one who created this gauge library. lol! Thanks for the wonderful gauges and ability to customize them!! I love them!!!

[RitterD]

@avijeetnpi I'm also using the cordova framework.

Thank you very much for your support. I'll try this out when I'm back in the office on monday and report you.

I opend a stackoverflow thread as well you can finde a minimum of a code example there:

https://stackoverflow.com/questions/52778772/total-canvas-memory-exceeds-the-maximum-limit-224mb

[Mikhus]

Thank you, guys, for a kind words. I'll take a look at example code once I'll be in front of my PC

[Mikhus]

Another point here that to avoid memory leakage on SPA application you would need to destroy gauge instance properly when your component with gauge is unmounted off the page. Use gaugeInstance.destroy() for that purpose...

[avijeetnpi]

Yup, gaugeInstance.destroy() is the key in SPA!!! I call it in beforeDestroy event in VueJS.