[Webkit-unassigned] [Bug 190280] New: Total canvas memory use exceeds the maximum limit

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=190280

            Bug ID: 190280
           Summary: Total canvas memory use exceeds the maximum limit
           Product: WebKit
           Version: Other
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Canvas
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ogier.maitre at epfl.ch
                CC: dino at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20181004/94d9eade/attachment-0001.html>