Add composite renderFrame() in IntermediateCanvas

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,63 @@ 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) {
+        const pixelRatio = frameState.pixelRatio;
+        const canvas = this.layerContext.canvas;
+        let width = Math.round(frameState.size[0] * pixelRatio);
+        let 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);
+        }
+
+
+        // this.clear(this.canvas_.width, this.canvas_.height);
+        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.