Merge pull request #8913 from fgravin/intermediatecanvas-renderframe

Implement renderFrame function for intermediate canvas renderer

src/ol/renderer/Composite.js

@@ -37,6 +37,7 @@ class CompositeMapRenderer extends MapRenderer {
     style.width = '100%';
     style.height = '100%';
 
+    this.element_.style.position = 'relative';
     this.element_.className = CLASS_UNSELECTABLE;
 
     const container = map.getViewport();

src/ol/renderer/canvas/ImageLayer.js

@@ -53,6 +53,7 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
    */
   prepareFrame(frameState, layerState) {
 
+    this.clear(frameState);
     const pixelRatio = frameState.pixelRatio;
     const size = frameState.size;
     const viewState = frameState.viewState;

src/ol/renderer/canvas/IntermediateCanvas.js

@@ -39,6 +39,12 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
      */
     this.hitCanvasContext_ = null;
 
+    /**
+     * @protected
+     * @type {CanvasRenderingContext2D}
+     */
+    this.layerContext = createCanvasContext2D();
+    this.layerContext.canvas.style.position = 'absolute';
   }
 
   /**
@@ -87,6 +93,48 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
     this.postCompose(context, frameState, layerState);
   }
 
+  /**
+   * @inheritDoc
+   */
+  renderFrame(frameState, layerState) {
+
+    this.preRender(frameState);
+    const image = this.getImage();
+    if (image) {
+
+      // clipped rendering if layer extent is set
+      const extent = layerState.extent;
+      const clipped = extent !== undefined &&
+          !containsExtent(extent, frameState.extent) &&
+          intersects(extent, frameState.extent);
+      if (clipped) {
+        this.clip(this.layerContext, frameState, /** @type {import("../../extent.js").Extent} */ (extent));
+      }
+
+      const imageTransform = this.getImageTransform();
+
+      // for performance reasons, context.setTransform is only used
+      // when the view is rotated. see http://jsperf.com/canvas-transform
+      const dx = imageTransform[4];
+      const dy = imageTransform[5];
+      const dw = image.width * imageTransform[0];
+      const dh = image.height * imageTransform[3];
+
+      if (dw >= 0.5 && dh >= 0.5) {
+        this.clear(frameState);
+        this.layerContext.drawImage(image, 0, 0, +image.width, +image.height,
+          Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
+      }
+
+      if (clipped) {
+        this.layerContext.restore();
+      }
+    }
+
+    this.postRender(frameState, layerState);
+    return this.layerContext.canvas;
+  }
+
   /**
    * @abstract
    * @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Canvas.
@@ -103,6 +151,25 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
     return abstract();
   }
 
+  /**
+   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   */
+  clear(frameState) {
+    const pixelRatio = frameState.pixelRatio;
+    const canvas = this.layerContext.canvas;
+    const width = Math.round(frameState.size[0] * pixelRatio);
+    const height = Math.round(frameState.size[1] * pixelRatio);
+
+    if (canvas.width != width || canvas.height != height) {
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.width = (width / pixelRatio) + 'px';
+      canvas.style.height = (height / pixelRatio) + 'px';
+    } else {
+      this.layerContext.clearRect(0, 0, width, height);
+    }
+  }
+
   /**
    * @inheritDoc
    */