Bug 190280 – REGRESSION (iOS 12): Total canvas memory use exceeds the maximum limit

• Status: NEW
• Component: Canvas

[Ogier Maitre]

Hi,

We are developing a web app that visualize some data ([https://affinitymap.epfl.ch](https://affinitymap.epfl.ch)). As the visualization is pretty complex, we use a kind of cache mechanism where the nodes are drawn into separated canvases that are not bound to the DOM. The number of canvas can be pretty high and each one can be pretty large when the user zoom and pan around in the map.

Before the last iOS update, it was working well, but we got a problem with Safari 12 on iOS, where the application crashes showing the following message :  
> Total canvas memory use exceeds the maximum limit (256 MB).

The amount of memory seems to be related to the device (256 on an iPad and 288 on an iPhone X).
The only page related to this error seems to be webkit source code itself : [HTMLCanvasElement.cpp](https://github.com/WebKit/webkit/blob/master/Source/WebCore/html/HTMLCanvasElement.cpp) (and now a stackoverflow question I asked).

```
let counter = 0

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement(‘canvas’)
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext(‘2d’)
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = n => {
    // create n * 1MB images
    const ctxs = []

    for( let i=0 ; i<n ; i++ ){
        ctxs.push(createImage())
    }

    console.log(`done for ${ctxs.length} MB`)
}

const process = (frequency,size) => {
    setInterval(()=>{
        createImages(size)
        counter+=size
        console.log(`total ${counter}`)
    },frequency)
}

// produce 100MB of canvas each 2s
process(2000,100)
```


I manage to write a small code producing the problem on demand, where I create a lot of 1MB canvases. As they are bound to a global variable, the canvases should be deleted right away.
With this code I found that the problem also arises on macOS (High Sierra and Mojave), but around 4GB which, on my computer corresponds to the amount of memory specified in the HTMLCanvasElement code L 204.
>  maxPixelMemory = std::max(ramSize() / 4, 2151 * MB);

Someone suggested a workaround, being to set the dimension of the canvases to 0, as a delete method:
```
const deleteCanvases = canvases => {
    canvases.forEach((canvas, i, a) => {
        canvas.height = 0
        canvas.width = 0
    })
}
```


I hope to be clear enough, but otherwise I can explain in more details.

Regards,
Ogier

[Radar WebKit Bug Importer]

<rdar://problem/45045405>