“Total canvas memory use exceeds the maximum limit (256MB)” error on iPad using big canvas

[sergiogregorutti]

I have a KonvaJS app with a "draw" functionality. On the mouse move event, I'm creating a new Line and adding points to it.

It works perfect on Desktop but it crashes on iPad. This is the issue that I get:

Total canvas memory use exceeds the maximum limit (256MB)

It's fired on this part of the KonvaJS library:

setHeight: function(t) {
    this.height = this._canvas.height = t * this.pixelRatio, this._canvas.style.height = t + "px";
    var e = this.pixelRatio;
    this.getContext()._context.scale(e, e)
},

The line that fires the error is:

this.getContext()._context.scale(e, e)

This error only happen when I'm using a big canvas size (example: 1200x1500px).
Any ideas of how to fix this issue?

Thanks in advance!

[lavrton]

How many layers do you have? Do you use caching?

[sergiogregorutti]

I'm using just one layer. But I didn't use caching. I'll take a look.

Anyway, I can't find a clear way to fix this issue. I'll continue trying and I'll keep this updated with my progress. I don't know if someone is dealing with the same problem.

[MaxGraey]

@SWebDevelop
https://discussions.apple.com/thread/4975106

So it seems max size is 1024x1024 for iOS in Safari

[lavrton]

I had this issue a long time ago. I reduced canvas usage and that helped me.
Also, you can try to reduce pixelRatio: Konva.pixelRatio = 1, but the canvas will be blurred a bit.

Fill free to add more info, if you have it.

[willyou]

I think this is an issue of Safari. Please check here
Some devs suggest that we can set canvas width & height, but it is not a solution for me,
because i can't find a way to set Konva elements of width * height to 0

[offs-bach]

I had that issue Total canvas memory use exceeds the maximum limit (384 MB) . I used many tricky solution to solve that, but it does NOT work. @lavrton Do you have any solution for that one?

[lavrton]

You need to profile memory. See what exactly consumes that much.

[offs-bach]

@lavrton Thanks for your response. I checked and the HTMLCanvas is increasing size. Does it enough information for providing solution?

[lavrton]

Well, solution is on your side. You see that a lot of HTMLCanvasElements are in memory. Do you use cache a lot? Do you destroy shapes correctly? Do you destroy stages?

[VForsmann]

Hey @lavrton.
Same case with me.
I use Konva to dynamically print to 3D elements in three.js.
In doing so, I dynamically create and remove Konva Stages.
I also use destroy, & remove.

After a few iterations, I also get a memory problem on iOS - and only on iOS.

The number of canvases remains high, despite destroy & remove.
I'm not entirely sure if this is a Safari problem, but I could imagine it.

[VForsmann]

Must correct: Just tested on macOS.
Also in desktop Safari the memory size increases with each iteration.

[VForsmann]

Just built a sandbox to rule out the error on my part:
https://6yvn7o.csb.app/

And surprise: It works as it should. Safari clears the memory correctly.

I searched further in my application: I managed Konva-Stages in React.useState. In doing so, shallowCopys were created.
The old objects are not cleared by the garbage collector - for whatever reason.
Safari definitely does this differently than Chrome here.

Sorry :) Maybe this helps anyways.

[zarv1k]

@VForsmann I made PR recently, #1442. I don't use cache(), but in my SPA I create/remove different stages (render via react-konva) many times during one app lifecycle. That PR fixes resources releasing in Safari macOS/iOS, I have no issues with that anymore after that fixes applied. Waiting it to be merged & published.