Release canvas memory when no longer needed

src/ol/VectorRenderTile.js

@@ -2,7 +2,7 @@
  * @module ol/VectorRenderTile
  */
 import Tile from './Tile.js';
-import {createCanvasContext2D} from './dom.js';
+import {createCanvasContext2D, releaseCanvas} from './dom.js';
 import {getUid} from './util.js';
 
 /**
@@ -154,7 +154,9 @@ class VectorRenderTile extends Tile {
    */
   release() {
     for (const key in this.context_) {
-      canvasPool.push(this.context_[key].canvas);
+      const context = this.context_[key];
+      releaseCanvas(context);
+      canvasPool.push(context.canvas);
       delete this.context_[key];
     }
     super.release();

src/ol/dom.js

@@ -40,6 +40,18 @@ export function createCanvasContext2D(
   );
 }
 
+/**
+ * Releases canvas memory to avoid exceeding memory limits in Safari.
+ * See https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/
+ * @param {CanvasRenderingContext2D} context Context.
+ */
+export function releaseCanvas(context) {
+  const canvas = context.canvas;
+  canvas.width = 1;
+  canvas.height = 1;
+  context.clearRect(0, 0, 1, 1);
+}
+
 /**
  * Get the current computed width for the given element including margin,
  * padding and border.