Use canvas pool for reprojection tiles

src/ol/reproj.js

@@ -19,6 +19,11 @@ import {solveLinearSystem} from './math.js';
 
 let brokenDiagonalRendering_;
 
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+export const canvasPool = [];
+
 /**
  * This draws a small triangle into a canvas by setting the triangle as the clip region
  * and then drawing a (too large) rectangle
@@ -217,7 +222,8 @@ export function render(
 ) {
   const context = createCanvasContext2D(
     Math.round(pixelRatio * width),
-    Math.round(pixelRatio * height)
+    Math.round(pixelRatio * height),
+    canvasPool
   );
 
   if (!opt_interpolate) {

src/ol/reproj/Tile.js

@@ -9,11 +9,13 @@ import TileState from '../TileState.js';
 import Triangulation from './Triangulation.js';
 import {
   calculateSourceExtentResolution,
+  canvasPool,
   render as renderReprojected,
 } from '../reproj.js';
 import {clamp} from '../math.js';
 import {getArea, getIntersection} from '../extent.js';
 import {listen, unlistenByKey} from '../events.js';
+import {releaseCanvas} from '../dom.js';
 
 /**
  * @typedef {function(number, number, number, number) : import("../Tile.js").default} FunctionType
@@ -349,6 +351,18 @@ class ReprojTile extends Tile {
     this.sourcesListenerKeys_.forEach(unlistenByKey);
     this.sourcesListenerKeys_ = null;
   }
+
+  /**
+   * Remove from the cache due to expiry
+   */
+  release() {
+    if (this.canvas_) {
+      releaseCanvas(this.canvas_.getContext('2d'));
+      canvasPool.push(this.canvas_);
+      this.canvas_ = null;
+    }
+    super.release();
+  }
 }
 
 export default ReprojTile;