Merge pull request #5708 from ahocevar/no-closepath

Remove unnecessary closePath() instructions

src/ol/render/canvas/replay.js

@@ -1256,29 +1256,41 @@ ol.inherits(ol.render.canvas.PolygonReplay, ol.render.canvas.Replay);
  */
 ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) {
   var state = this.state_;
+  var fill = state.fillStyle !== undefined;
+  var stroke = state.strokeStyle != undefined;
+  var numEnds = ends.length;
+  if (!fill && !stroke) {
+    return ends[numEnds - 1];
+  }
   var beginPathInstruction = [ol.render.canvas.Instruction.BEGIN_PATH];
   this.instructions.push(beginPathInstruction);
   this.hitDetectionInstructions.push(beginPathInstruction);
-  var i, ii;
-  for (i = 0, ii = ends.length; i < ii; ++i) {
+  for (var i = 0; i < numEnds; ++i) {
     var end = ends[i];
     var myBegin = this.coordinates.length;
-    var myEnd = this.appendFlatCoordinates(
-        flatCoordinates, offset, end, stride, true);
+    var myEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride,
+        // Performance optimization: only close the ring when we do not have a
+        // stroke. Otherwise closePath() will take care of that.
+        !stroke);
     var moveToLineToInstruction =
         [ol.render.canvas.Instruction.MOVE_TO_LINE_TO, myBegin, myEnd];
+    this.instructions.push(moveToLineToInstruction);
+    this.hitDetectionInstructions.push(moveToLineToInstruction);
+    if (stroke) {
+      // Performance optimization: only call closePath() when we have a stroke.
+      // Otherwise the ring is closed already (see appendFlatCoordinates above).
       var closePathInstruction = [ol.render.canvas.Instruction.CLOSE_PATH];
-    this.instructions.push(moveToLineToInstruction, closePathInstruction);
-    this.hitDetectionInstructions.push(moveToLineToInstruction,
-        closePathInstruction);
+      this.instructions.push(closePathInstruction);
+      this.hitDetectionInstructions.push(closePathInstruction);
+    }
     offset = end;
   }
   var fillInstruction = [ol.render.canvas.Instruction.FILL];
   this.hitDetectionInstructions.push(fillInstruction);
-  if (state.fillStyle !== undefined) {
+  if (fill) {
     this.instructions.push(fillInstruction);
   }
-  if (state.strokeStyle !== undefined) {
+  if (stroke) {
     goog.DEBUG && console.assert(state.lineWidth !== undefined,
         'state.lineWidth should be defined');
     var strokeInstruction = [ol.render.canvas.Instruction.STROKE];
@@ -2065,7 +2077,6 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
   context.lineTo(flatClipCoords[2], flatClipCoords[3]);
   context.lineTo(flatClipCoords[4], flatClipCoords[5]);
   context.lineTo(flatClipCoords[6], flatClipCoords[7]);
-  context.closePath();
   context.clip();
 
   var replayTypes = opt_replayTypes ? opt_replayTypes : ol.render.replay.ORDER;

src/ol/reproj/index.js

@@ -217,15 +217,14 @@ ol.reproj.render = function(width, height, pixelRatio,
       var p1 = ol.reproj.enlargeClipPoint_(centroidX, centroidY, u1, v1);
       var p2 = ol.reproj.enlargeClipPoint_(centroidX, centroidY, u2, v2);
 
-      context.moveTo(p0[0], p0[1]);
-      context.lineTo(p1[0], p1[1]);
+      context.moveTo(p1[0], p1[1]);
+      context.lineTo(p0[0], p0[1]);
       context.lineTo(p2[0], p2[1]);
     } else {
-      context.moveTo(u0, v0);
-      context.lineTo(u1, v1);
+      context.moveTo(u1, v1);
+      context.lineTo(u0, v0);
       context.lineTo(u2, v2);
     }
-    context.closePath();
     context.clip();
 
     context.transform(
@@ -257,8 +256,8 @@ ol.reproj.render = function(width, height, pixelRatio,
           v2 = -(target[2][1] - targetTopLeft[1]) / targetResolution;
 
       context.beginPath();
-      context.moveTo(u0, v0);
-      context.lineTo(u1, v1);
+      context.moveTo(u1, v1);
+      context.lineTo(u0, v0);
       context.lineTo(u2, v2);
       context.closePath();
       context.stroke();

test/spec/ol/renderer/canvas/replay.test.js

@@ -245,14 +245,35 @@ describe('ol.render.canvas.LineStringReplay', function() {
 
 describe('ol.render.canvas.PolygonReplay', function() {
 
-  describe('#getBufferedMaxExtent()', function() {
+  var replay;
 
-    it('buffers the max extent to accommodate stroke width', function() {
+  beforeEach(function() {
     var tolerance = 1;
     var extent = [-180, -90, 180, 90];
     var resolution = 10;
-      var replay = new ol.render.canvas.PolygonReplay(tolerance, extent,
+    replay = new ol.render.canvas.PolygonReplay(tolerance, extent,
         resolution);
+  });
+
+  describe('#drawFlatCoordinatess_()', function() {
+    it('returns correct offset', function() {
+      var coords = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2, 3, 4, 5, 6, 1, 2];
+      var ends = [7, 14];
+      var stroke = new ol.style.Stroke({
+        width: 5
+      });
+      replay.setFillStrokeStyle(null, stroke);
+      var offset = replay.drawFlatCoordinatess_(coords, 0, ends, 2);
+      expect(offset).to.be(14);
+      replay.setFillStrokeStyle(null, null);
+      offset = replay.drawFlatCoordinatess_(coords, 0, ends, 2);
+      expect(offset).to.be(14);
+    });
+  });
+
+  describe('#getBufferedMaxExtent()', function() {
+
+    it('buffers the max extent to accommodate stroke width', function() {
       var stroke = new ol.style.Stroke({
         width: 5
       });

test_rendering/spec/ol/style/polygon.test.js

@@ -15,8 +15,9 @@ describe('ol.rendering.style.Polygon', function() {
 
   var target, map, vectorSource;
 
-  function createMap(renderer) {
-    target = createMapDiv(50, 50);
+  function createMap(renderer, opt_size) {
+    var size = opt_size || 50;
+    target = createMapDiv(size, size);
 
     vectorSource = new ol.source.Vector();
     var vectorLayer = new ol.layer.Vector({
@@ -92,6 +93,68 @@ describe('ol.rendering.style.Polygon', function() {
     });
   });
 
+  describe('different types with stroke', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var stroke = new ol.style.Stroke({
+        width: 10,
+        color: '#000',
+        lineJoin: 'round',
+        lineCap: 'butt'
+      });
+
+      var feature;
+      // rectangle
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 1 hole
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[0, 10], [0, 20], [20, 20], [20, 10], [0, 10]],
+          [[5, 13], [10, 13], [10, 17], [5, 17], [5, 13]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 2 holes
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, -20], [-20, 5], [20, 5], [20, -20], [-20, -20]],
+          [[-12, -12], [-8, -12], [-8, -3], [-12, -3], [-12, -3]],
+          [[0, -12], [13, -12], [13, -3], [0, -3], [0, -12]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas', 100);
+      map.getView().setResolution(0.5);
+      createFeatures();
+      expectResemble(map, 'spec/ol/style/expected/polygon-types-canvas-stroke.png',
+          IMAGE_TOLERANCE, done);
+    });
+  });
+
   describe('z-index', function() {
     afterEach(function() {
       disposeMap(map);