Add and use ol.renderer.canvas.Layer#composeFrame

src/ol/renderer/canvas/canvaslayerrenderer.js

@@ -1,5 +1,6 @@
 goog.provide('ol.renderer.canvas.Layer');
 
+goog.require('goog.vec.Mat4');
 goog.require('ol.layer.Layer');
 goog.require('ol.renderer.Layer');
 
@@ -17,6 +18,44 @@ ol.renderer.canvas.Layer = function(mapRenderer, layer) {
 goog.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer);
 
 
+/**
+ * @param {ol.FrameState} frameState Frame state.
+ * @param {ol.layer.LayerState} layerState Layer state.
+ * @param {CanvasRenderingContext2D} context Context.
+ */
+ol.renderer.canvas.Layer.prototype.composeFrame =
+    function(frameState, layerState, context) {
+
+  var image = this.getImage();
+  if (!goog.isNull(image)) {
+    var transform = this.getTransform();
+    context.globalAlpha = layerState.opacity;
+
+    // for performance reasons, context.setTransform is only used
+    // when the view is rotated. see http://jsperf.com/canvas-transform
+    if (frameState.view2DState.rotation === 0) {
+      var dx = goog.vec.Mat4.getElement(transform, 0, 3);
+      var dy = goog.vec.Mat4.getElement(transform, 1, 3);
+      var dw = image.width * goog.vec.Mat4.getElement(transform, 0, 0);
+      var dh = image.height * goog.vec.Mat4.getElement(transform, 1, 1);
+      context.drawImage(image, 0, 0, +image.width, +image.height,
+          Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
+    } else {
+      context.setTransform(
+          goog.vec.Mat4.getElement(transform, 0, 0),
+          goog.vec.Mat4.getElement(transform, 1, 0),
+          goog.vec.Mat4.getElement(transform, 0, 1),
+          goog.vec.Mat4.getElement(transform, 1, 1),
+          goog.vec.Mat4.getElement(transform, 0, 3),
+          goog.vec.Mat4.getElement(transform, 1, 3));
+      context.drawImage(image, 0, 0);
+      context.setTransform(1, 0, 0, 1, 0, 0);
+    }
+  }
+
+};
+
+
 /**
  * @return {HTMLCanvasElement|HTMLVideoElement|Image} Canvas.
  */

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -107,9 +107,8 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
   var layerStates = frameState.layerStates;
   var layersArray = frameState.layersArray;
   var viewResolution = frameState.view2DState.resolution;
-  var i, ii, image, layer, layerRenderer, layerState, transform;
+  var i, ii, layer, layerRenderer, layerState;
   for (i = 0, ii = layersArray.length; i < ii; ++i) {
-
     layer = layersArray[i];
     layerRenderer =
         /** @type {ol.renderer.canvas.Layer} */ (this.getLayerRenderer(layer));
@@ -121,37 +120,7 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
       continue;
     }
     layerRenderer.prepareFrame(frameState, layerState);
-
+    layerRenderer.composeFrame(frameState, layerState, context);
-    image = layerRenderer.getImage();
-    if (!goog.isNull(image)) {
-      transform = layerRenderer.getTransform();
-      context.globalAlpha = layerState.opacity;
-
-      // for performance reasons, context.setTransform is only used
-      // when the view is rotated. see http://jsperf.com/canvas-transform
-      if (frameState.view2DState.rotation === 0) {
-        var dx = goog.vec.Mat4.getElement(transform, 0, 3);
-        var dy = goog.vec.Mat4.getElement(transform, 1, 3);
-        var dw = image.width * goog.vec.Mat4.getElement(transform, 0, 0);
-        var dh = image.height * goog.vec.Mat4.getElement(transform, 1, 1);
-        goog.asserts.assert(goog.isNumber(image.width));
-        goog.asserts.assert(goog.isNumber(image.height));
-        context.drawImage(image, 0, 0, image.width, image.height,
-            Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
-      } else {
-        context.setTransform(
-            goog.vec.Mat4.getElement(transform, 0, 0),
-            goog.vec.Mat4.getElement(transform, 1, 0),
-            goog.vec.Mat4.getElement(transform, 0, 1),
-            goog.vec.Mat4.getElement(transform, 1, 1),
-            goog.vec.Mat4.getElement(transform, 0, 3),
-            goog.vec.Mat4.getElement(transform, 1, 3));
-
-        context.drawImage(image, 0, 0);
-        context.setTransform(1, 0, 0, 1, 0, 0);
-      }
-    }
-
   }
 
   if (!this.renderedVisible_) {