Release canvas memory faster

src/ol/VectorRenderTile.js

@@ -103,6 +103,10 @@ class VectorRenderTile extends Tile {
    */
   disposeInternal() {
     this.removeSourceTiles_(this);
+    for (const key in this.context_) {
+      const canvas = this.context_[key].canvas;
+      canvas.width = canvas.height = 0;
+    }
     this.setState(TileState.ABORT);
     super.disposeInternal();
   }

src/ol/render/canvas.js

@@ -169,6 +169,17 @@ export const defaultLineWidth = 1;
 export const labelCache = new LRUCache();
 
 
+/**
+ * Prune the label cache.
+ */
+export function pruneLabelCache() {
+  while (labelCache.canExpireCache()) {
+    const canvas = labelCache.pop();
+    canvas.width = canvas.height = 0;
+  }
+}
+
+
 /**
  * @type {!Object<string, number>}
  */

src/ol/render/canvas/TextBuilder.js

@@ -6,7 +6,7 @@ import {asColorLike} from '../../colorlike.js';
 import {intersects} from '../../extent.js';
 import {matchingChunk} from '../../geom/flat/straightchunk.js';
 import GeometryType from '../../geom/GeometryType.js';
-import {labelCache, defaultTextAlign, defaultPadding, defaultLineCap, defaultLineDashOffset, defaultLineDash, defaultLineJoin, defaultFillStyle, checkFont, defaultFont, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline} from '../canvas.js';
+import {pruneLabelCache, defaultTextAlign, defaultPadding, defaultLineCap, defaultLineDashOffset, defaultLineDash, defaultLineJoin, defaultFillStyle, checkFont, defaultFont, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline} from '../canvas.js';
 import CanvasInstruction from './Instruction.js';
 import CanvasBuilder from './Builder.js';
 import TextPlacement from '../../style/TextPlacement.js';
@@ -131,7 +131,7 @@ class CanvasTextBuilder extends CanvasBuilder {
      */
     this.strokeKey_ = '';
 
-    labelCache.prune();
+    pruneLabelCache();
   }
 
   /**

src/ol/structs/LRUCache.js

@@ -287,16 +287,6 @@ class LRUCache extends EventTarget {
     this.highWaterMark = size;
   }
 
-
-  /**
-   * Prune the cache.
-   */
-  prune() {
-    while (this.canExpireCache()) {
-      this.pop();
-    }
-  }
-
 }
 
 export default LRUCache;

test/spec/ol/render/canvas/index.test.js

@@ -10,6 +10,17 @@ describe('ol.render.canvas', function() {
   font.rel = 'stylesheet';
   const head = document.getElementsByTagName('head')[0];
 
+  it('pruneLabelCache()', function() {
+    const highWaterMark = render.labelCache.highWaterMark;
+    render.labelCache.highWaterMark = 1;
+    render.labelCache.set('foo', document.createElement('canvas'));
+    render.labelCache.set('bar', document.createElement('canvas'));
+    render.pruneLabelCache();
+    expect(render.labelCache.getCount()).to.be(1);
+    render.labelCache.highWaterMark = highWaterMark;
+    render.labelCache.clear();
+  });
+
   describe('ol.render.canvas.checkFont()', function() {
 
     beforeEach(function() {

test/spec/ol/structs/lrucache.test.js

@@ -285,7 +285,9 @@ describe('ol.structs.LRUCache', function() {
       lruCache.setSize(2);
       expect(lruCache.highWaterMark).to.be(2);
       fillLRUCache(lruCache);
-      lruCache.prune();
+      while (lruCache.canExpireCache()) {
+        lruCache.pop();
+      }
       expect(lruCache.getKeys().length).to.be(2);
     });
   });