Total canvas memory use exceeds the maximum limit (Safari 12)

Question

We are working on a visualization web application which use d3-force to draw a network on a canvas.

But now we’ve got a problem with browsers on iOS, where the proces

Answer 1

I had this problem for a long time, but it seems I was able to fix it today. I used a canvas and drawn on it several times without having a problem. However, sometimes after some resizing I got the exception "Total canvas memory usage exceeds the maximum limit", and my canvas seemed to have disappeared...

My solution was to reduce the size of the canvas to 0 and then delete the entire canvas. Afterwards initialize a new canvas after the resize happened.

DoResize();

if (typeof canvas === "object" && canvas !== null) {
    canvas.width = 0;
    canvas.height = 0;

    canvas.remove();
    delete canvas;
    canvas = null;
}

canvas = document.createElement("canvas");              
container.appendChild(canvas);

// Just in case, wait for the Browser
window.requestAnimationFrame(() => {
    let context = canvas.getContext("2d");
    context.moveTo(10, 10);
    context.lineTo(30, 30);
    context.stroke();
});

The requestAnimationFrame was not necessarily needed but I just wanted to wait for the Device to update the canvas. I tested that with an iPhone XS Max.