Enable extent clipping for vector layers

src/ol/renderer/canvas/layer.js

@@ -30,21 +30,12 @@ ol.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer);
 
 
 /**
- * @param {olx.FrameState} frameState Frame state.
- * @param {ol.LayerState} layerState Layer state.
  * @param {CanvasRenderingContext2D} context Context.
+ * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.Extent} extent Clip extent.
+ * @protected
  */
-ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
+ol.renderer.canvas.Layer.prototype.clip = function(context, frameState, extent) {
-
-  this.dispatchPreComposeEvent(context, frameState);
-
-  var image = this.getImage();
-  if (image) {
-
-    // clipped rendering if layer extent is set
-    var extent = layerState.extent;
-    var clipped = extent !== undefined;
-    if (clipped) {
   var pixelRatio = frameState.pixelRatio;
   var width = frameState.size[0] * pixelRatio;
   var height = frameState.size[1] * pixelRatio;
@@ -68,6 +59,26 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
   context.lineTo(bottomLeft[0] * pixelRatio, bottomLeft[1] * pixelRatio);
   context.clip();
   ol.render.canvas.rotateAtOffset(context, rotation, width / 2, height / 2);
+};
+
+
+/**
+ * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.LayerState} layerState Layer state.
+ * @param {CanvasRenderingContext2D} context Context.
+ */
+ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
+
+  this.dispatchPreComposeEvent(context, frameState);
+
+  var image = this.getImage();
+  if (image) {
+
+    // clipped rendering if layer extent is set
+    var extent = layerState.extent;
+    var clipped = extent !== undefined;
+    if (clipped) {
+      this.clip(context, frameState, extent);
     }
 
     var imageTransform = this.getImageTransform();

src/ol/renderer/canvas/vectorlayer.js

@@ -85,6 +85,12 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
 
   this.dispatchPreComposeEvent(context, frameState, transform);
 
+  // clipped rendering if layer extent is set
+  var clipExtent = layerState.extent;
+  var clipped = clipExtent !== undefined;
+  if (clipped) {
+    this.clip(context, frameState, clipExtent);
+  }
   var replayGroup = this.replayGroup_;
   if (replayGroup && !replayGroup.isEmpty()) {
     var layer = this.getLayer();
@@ -160,6 +166,9 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     replayContext.globalAlpha = alpha;
   }
 
+  if (clipped) {
+    context.restore();
+  }
   this.dispatchPostComposeEvent(context, frameState, transform);
 
 };