Reuse temporary canvas in getDataAtPixel()

src/ol/renderer/canvas/Layer.js

@@ -76,6 +76,12 @@ class CanvasLayerRenderer extends LayerRenderer {
      * @type {boolean}
      */
     this.containerReused = false;
+
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    this.pixelContext_ = null;
   }
 
   /**
@@ -264,20 +270,25 @@ class CanvasLayerRenderer extends LayerRenderer {
       }
     }
 
+    const x = Math.round(renderPixel[0]);
+    const y = Math.round(renderPixel[1]);
+    let pixelContext = this.pixelContext_;
+    if (!pixelContext) {
+      const pixelCanvas = document.createElement('canvas');
+      pixelCanvas.width = 1;
+      pixelCanvas.height = 1;
+      pixelContext = pixelCanvas.getContext('2d');
+      this.pixelContext_ = pixelContext;
+    }
+    pixelContext.clearRect(0, 0, 1, 1);
     let data;
     try {
-      const x = Math.round(renderPixel[0]);
+      pixelContext.drawImage(context.canvas, x, y, 1, 1, 0, 0, 1, 1);
-      const y = Math.round(renderPixel[1]);
+      data = pixelContext.getImageData(0, 0, 1, 1).data;
-      const newCanvas = document.createElement('canvas');
-      const newContext = newCanvas.getContext('2d');
-      newCanvas.width = 1;
-      newCanvas.height = 1;
-      newContext.clearRect(0, 0, 1, 1);
-      newContext.drawImage(context.canvas, x, y, 1, 1, 0, 0, 1, 1);
-      data = newContext.getImageData(0, 0, 1, 1).data;
     } catch (err) {
       if (err.name === 'SecurityError') {
         // tainted canvas, we assume there is data at the given pixel (although there might not be)
+        this.pixelContext_ = null;
         return new Uint8Array();
       }
       return data;