Merge pull request #7339 from ahocevar/text-stroke

Use correct text stroke on HiDPI devices

src/ol/render/canvas/textreplay.js

@@ -326,7 +326,7 @@ ol.render.canvas.TextReplay.prototype.getImage_ = function(text, fill, stroke) {
     context.font = textState.font;
     if (stroke) {
       context.strokeStyle = strokeState.strokeStyle;
-      context.lineWidth = strokeState.lineWidth;
+      context.lineWidth = strokeWidth * pixelRatio;
       context.lineCap = strokeState.lineCap;
       context.lineJoin = strokeState.lineJoin;
       context.miterLimit = strokeState.miterLimit;

test/rendering/ol/style/text.test.js

@@ -17,14 +17,14 @@ describe('ol.rendering.style.Text', function() {
 
   var map, vectorSource;
 
-  function createMap(renderer) {
+  function createMap(renderer, opt_pixelRatio) {
     vectorSource = new ol.source.Vector();
     var vectorLayer = new ol.layer.Vector({
       source: vectorSource
     });
 
     map = new ol.Map({
-      pixelRatio: 1,
+      pixelRatio: opt_pixelRatio || 1,
       target: createMapDiv(200, 200),
       renderer: renderer,
       layers: [vectorLayer],
@@ -154,6 +154,12 @@ describe('ol.rendering.style.Text', function() {
       expectResemble(map, 'rendering/ol/style/expected/text-rotated-canvas.png', IMAGE_TOLERANCE, done);
     });
 
+    it('renders correct stroke with pixelRatio != 1', function(done) {
+      createMap('canvas', 2);
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', IMAGE_TOLERANCE, done);
+    });
+
     it('renders multiline text with alignment options', function(done) {
       createMap('canvas');
       var feature;

test/test-extensions.js

@@ -383,6 +383,14 @@ goog.require('ol.has');
   };
 
   function resembleCanvas(canvas, referenceImage, tolerance, done) {
+    if (showMap) {
+      var wrapper = document.createElement('div');
+      wrapper.style.width = canvas.width + 'px';
+      wrapper.style.height = canvas.height + 'px';
+      wrapper.appendChild(canvas);
+      document.body.appendChild(wrapper);
+      document.body.appendChild(document.createTextNode(referenceImage));
+    }
     var width = canvas.width;
     var height = canvas.height;
     var image = new Image();
@@ -394,14 +402,6 @@ goog.require('ol.has');
       referenceCanvas.height = image.height;
       var referenceContext = referenceCanvas.getContext('2d');
       referenceContext.drawImage(image, 0, 0, image.width, image.height);
-      if (showMap) {
-        var wrapper = document.createElement('div');
-        wrapper.style.width = canvas.width + 'px';
-        wrapper.style.height = canvas.height + 'px';
-        wrapper.appendChild(canvas);
-        document.body.appendChild(wrapper);
-        document.body.appendChild(document.createTextNode(referenceImage));
-      }
       var context = canvas.getContext('2d');
       var output = context.createImageData(canvas.width, canvas.height);
       var mismatchPx = pixelmatch(