Konva.js Blog

A tech blog giving usable explainers, advice, tools, tricks and techniques for the Konva.js JavaScript canvas library, the HTML5 canvas, and related subjects.

Konva - Canvas limits in Safari IOS explainer

Konva - Canvas limits in Safari IOS explainer

VanquishedWombat ― 2 min read

Someone on the Konva Discord group had an issue loading a complex canvas on mobile via the Konva.Node.create() process. The app works fine on desktop but iPhone Safari is complaining about the canvas being too large. What gives?

This post is really a signpost to the good work in a couple of blog posts by Rick Schennink. I'm not going to cut & paste his work though I'll give a quick description so you can recognise if you are in the same trap.

Canvas Area Exceeds The Maximum Limit

Rick's description is:

💡
Safari simply cannot draw large canvas elements. The limit is set at 16.777.216 pixels. Create a canvas with more pixels and iOS Safari will tell us it exceeds the memory limit.

Head over to his blog post here for the full scoop.

Total Canvas Memory Use Exceeds The Maximum Limit

This is the second issue you might run into if you start using off-screen canvas (by which I mean a canvas you create yourself but do not display. The new offScreenCanvas API may also fall prey to this issue but Rick's article was written before these existed I believe).

Rick says of this one

💡
Safari has a thing for hoarding canvas elements. When you’re done with a canvas, Safari will hold on to it for a while, even if you’re not referencing it. Safari on iOS has the same hobby. It desperately wants to keep up with its big brother on MacOs but it just doesn’t have the same storage capacity. Once the storage box is full, it’ll throw this message and start drawing transparent canvas elements.

Again, head over to Rick's post here to read the details and solution. I will copy the code of the solution below in case that blog ever goes away.

So - the solution is to always reset any temporary canvas that you created to have small dimensions and no content. Rick suggests this function as the way to do that.

function releaseCanvas(canvas) {
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx && ctx.clearRect(0, 0, 1, 1);
}

For Konva we can use stage.destroyChildren() and stage.size({x:0, y: 0}) - other canvas libs probably have similar abilities.

Summary

We've seen that IOS has big ambitions but is cursed with more memory limitations than its big brother on MAC OS., and that this results in a relatively small limit on the overall canvas size and bear traps down the road if we don't manage done-with-that-canvas instance disposal sensibly.

We've also seen the details the Rick provides, including an answer for the second issue.

Thanks for reading.

VW Feb 2024

Image by Ashim D'Silva at Unspash.com

Keep Exploring

KonvaTricksJavaScriptCanvasTextTransformationsVitePerformanceLinePathCSSrichTextClipFuncTypeScriptAnimation