Reuse existing canvases from vector render tiles

src/ol/Tile.js

@@ -144,6 +144,12 @@ class Tile extends EventTarget {
     this.dispatchEvent(EventType.CHANGE);
   }
 
+  /**
+   * Called by the tile cache when the tile is removed from the cache due to expiry
+   */
+  release() {
+  }
+
   /**
    * @return {string} Key.
    */

src/ol/TileCache.js

@@ -15,7 +15,7 @@ class TileCache extends LRUCache {
       if (tile.getKey() in usedTiles) {
         break;
       } else {
-        this.pop();
+        this.pop().release();
       }
     }
   }
@@ -33,6 +33,7 @@ class TileCache extends LRUCache {
     this.forEach(function(tile) {
       if (tile.tileCoord[0] !== z) {
         this.remove(getKey(tile.tileCoord));
+        tile.release();
       }
     }.bind(this));
   }

src/ol/VectorRenderTile.js

@@ -18,6 +18,10 @@ import {createCanvasContext2D} from './dom.js';
  * @property {number} renderedTileZ
  */
 
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+const canvasPool = [];
 
 class VectorRenderTile extends Tile {
 
@@ -107,7 +111,7 @@ class VectorRenderTile extends Tile {
   getContext(layer) {
     const key = getUid(layer);
     if (!(key in this.context_)) {
-      this.context_[key] = createCanvasContext2D();
+      this.context_[key] = createCanvasContext2D(1, 1, canvasPool);
     }
     return this.context_[key];
   }
@@ -156,6 +160,16 @@ class VectorRenderTile extends Tile {
   load() {
     this.getSourceTiles();
   }
+
+  /**
+   * @inheritDoc
+   */
+  release() {
+    for (const key in this.context_) {
+      canvasPool.push(this.context_[key].canvas);
+    }
+    super.release();
+  }
 }
 
 

src/ol/dom.js

@@ -7,10 +7,12 @@
  * Create an html canvas element and returns its 2d context.
  * @param {number=} opt_width Canvas width.
  * @param {number=} opt_height Canvas height.
+ * @param {Array<HTMLCanvasElement>=} opt_canvasPool Canvas pool to take existing canvas from.
  * @return {CanvasRenderingContext2D} The context.
  */
-export function createCanvasContext2D(opt_width, opt_height) {
-  const canvas = document.createElement('canvas');
+export function createCanvasContext2D(opt_width, opt_height, opt_canvasPool) {
+  const canvas = opt_canvasPool && opt_canvasPool.length ?
+    opt_canvasPool.shift() : document.createElement('canvas');
   if (opt_width) {
     canvas.width = opt_width;
   }