diff --git a/src/ol/reproj.js b/src/ol/reproj.js index 4472f76fc2..06b427b3d0 100644 --- a/src/ol/reproj.js +++ b/src/ol/reproj.js @@ -19,6 +19,11 @@ import {solveLinearSystem} from './math.js'; let brokenDiagonalRendering_; +/** + * @type {Array} + */ +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) { diff --git a/src/ol/reproj/Tile.js b/src/ol/reproj/Tile.js index 1be2fb2d28..78fd235b5e 100644 --- a/src/ol/reproj/Tile.js +++ b/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;