title: Total canvas memory use exceeds the maximum limit (Safari 12)
body: <p>We are working on a <a href="https://affinitymap.epfl.ch" rel="noreferrer">visualization web application</a> which use d3-force to draw a network on a canvas.</p>
  <p>But now we’ve got a problem with browsers on iOS, where the process crashes after few interactions with the interface.
  To my recollection, this was not a problem with older version (prior to iOS12), but I don’t have any not-updated-device to confirm this.</p>
  <p>I think this code summarizes the problem :</p>
  <pre><code>const { range } = require('d3-array')
  
  // create a 1MB image
  const createImage = () =&gt; {
      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 = i =&gt; {
      // create i * 1MB images
      let ctxs = range(i).map(() =&gt; {
          return createImage()
      })
      console.log(`done for ${ctxs.length} MB`)
      ctxs = null
  }
  
  window.cis = createImages
  </code></pre>
  <p>Then on an iPad and in the inspector :</p>
  <pre><code>&gt; cis(256)
  [Log] done for 256 MB (main-a9168dc888c2e24bbaf3.bundle.js, line 11317)
  &lt; undefined
  &gt; cis(1)
  [Warning] Total canvas memory use exceeds the maximum limit (256 MB). (main-a9168dc888c2e24bbaf3.bundle.js, line 11307)
  &lt; TypeError: null is not an object (evaluating 'ctx.strokeRect')
  </code></pre>
  <p>Being, I create 256 x 1MB canvas, everything goes well, but I create one more and the canvas.getContext returns a null pointer.
  It is then impossible to create another canvas.</p>
  <p>The limit seems to be device related as on the iPad its is 256MB and on an iPhone X it is 288MB.</p>
  <pre><code>&gt; cis(288)
  [Log] done for 288 MB (main-a9168dc888c2e24bbaf3.bundle.js, line 11317)
  &lt; undefined
  &gt; cis(1)
  [Warning] Total canvas memory use exceeds the maximum limit (288 MB). (main-a9168dc888c2e24bbaf3.bundle.js, line 11307)
  &lt; TypeError: null is not an object (evaluating 'ctx.strokeRect')
  </code></pre>
  <p>As it is a cache I should be able to delete some elements, but I’m not (as setting ctxs or ctx to null should trigger the GC, but it does not solve the problem).</p>
  <p>The only relevant page I found on this problem is a webkit source code page: <a href="https://github.com/WebKit/webkit/blob/master/Source/WebCore/html/HTMLCanvasElement.cpp" rel="noreferrer">HTMLCanvasElement.cpp</a>.</p>
  <p>I suspect the problem could come from webkit itself, but I’m would like to be sure before posting to webkit issue tracker.</p>
  <p>Is there another way to destroy the canvas contexts ?</p>
  <p>Thanks in advance for any idea, pointer, ...</p>
  <p><strong>UPDATE</strong></p>
  <p>I found this Webkit issue which is (probably) a description of this bug:
  <a href="https://bugs.webkit.org/show_bug.cgi?id=195325" rel="noreferrer">https://bugs.webkit.org/show_bug.cgi?id=195325</a></p>
  <p>To add some informations, I tried other browsers. Safari 12 has the same problem on macOS, even if the limit is higher (1/4 of the computer memory, as stated in webkit sources). I also tried with the latest webkit build (236590) without more luck.
  But the code works on Firefox 62 and Chrome 69.</p>
  <p>I refined the test code, so it can be executed directly from the debugger console. It would be really helpful if someone could test the code on an older safari (like 11).</p>
  <pre><code>let counter = 0
  
  // create a 1MB image
  const createImage = () =&gt; {
      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 =&gt; {
      // create n * 1MB images
      const ctxs = []
  
      for( let i=0 ; i&lt;n ; i++ ){
          ctxs.push(createImage())
      }
  
      console.log(`done for ${ctxs.length} MB`)
  }
  
  const process = (frequency,size) =&gt; {
      setInterval(()=&gt;{
          createImages(size)
          counter+=size
          console.log(`total ${counter}`)
      },frequency)
  }
  
  
  process(2000,1000)
  </code></pre>