Handle scaled output canvas correctly

src/ol/render/canvas/Executor.js

@@ -293,6 +293,7 @@ class Executor {
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
+   * @param {number} contextScale Scale of the context.
    * @param {number} x X.
    * @param {number} y Y.
    * @param {import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} imageOrLabel Image.
@@ -313,6 +314,7 @@ class Executor {
    */
   replayImageOrLabel_(
     context,
+    contextScale,
     x,
     y,
     imageOrLabel,
@@ -395,9 +397,9 @@ class Executor {
       ? (strokeInstruction[2] * scale) / 2
       : 0;
     const intersects =
-      tmpExtent[0] - strokePadding <= canvas.width &&
+      tmpExtent[0] - strokePadding <= canvas.width / contextScale &&
       tmpExtent[2] + strokePadding >= 0 &&
-      tmpExtent[1] - strokePadding <= canvas.height &&
+      tmpExtent[1] - strokePadding <= canvas.height / contextScale &&
       tmpExtent[3] + strokePadding >= 0;
 
     if (snapToPixel) {
@@ -593,6 +595,7 @@ class Executor {
   /**
    * @private
    * @param {CanvasRenderingContext2D} context Context.
+   * @param {number} contextScale Scale of the context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {Array<*>} instructions Instructions array.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
@@ -604,6 +607,7 @@ class Executor {
    */
   execute_(
     context,
+    contextScale,
     transform,
     instructions,
     snapToPixel,
@@ -826,6 +830,7 @@ class Executor {
             }
             this.replayImageOrLabel_(
               context,
+              contextScale,
               pixelCoordinates[d],
               pixelCoordinates[d + 1],
               image,
@@ -918,6 +923,7 @@ class Executor {
                     offsetY;
                   this.replayImageOrLabel_(
                     context,
+                    contextScale,
                     /** @type {number} */ (part[0]),
                     /** @type {number} */ (part[1]),
                     label,
@@ -947,6 +953,7 @@ class Executor {
                   anchorY = baseline * label.height - offsetY;
                   this.replayImageOrLabel_(
                     context,
+                    contextScale,
                     /** @type {number} */ (part[0]),
                     /** @type {number} */ (part[1]),
                     label,
@@ -1064,14 +1071,16 @@ class Executor {
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
+   * @param {number} contextScale Scale of the context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
    */
-  execute(context, transform, viewRotation, snapToPixel) {
+  execute(context, contextScale, transform, viewRotation, snapToPixel) {
     this.viewRotation_ = viewRotation;
     this.execute_(
       context,
+      contextScale,
       transform,
       this.instructions,
       snapToPixel,
@@ -1101,6 +1110,7 @@ class Executor {
     this.viewRotation_ = viewRotation;
     return this.execute_(
       context,
+      1,
       transform,
       this.hitDetectionInstructions,
       true,

src/ol/render/canvas/ExecutorGroup.js

@@ -310,6 +310,7 @@ class ExecutorGroup {
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
+   * @param {number} contextScale Scale of the context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
@@ -319,6 +320,7 @@ class ExecutorGroup {
    */
   execute(
     context,
+    contextScale,
     transform,
     viewRotation,
     snapToPixel,
@@ -357,7 +359,13 @@ class ExecutorGroup {
               declutter.push(replay, transform.slice(0));
             }
           } else {
-            replay.execute(context, transform, viewRotation, snapToPixel);
+            replay.execute(
+              context,
+              contextScale,
+              transform,
+              viewRotation,
+              snapToPixel
+            );
           }
         }
       }
@@ -476,7 +484,7 @@ export function replayDeclutter(
         });
       }
       const transform = executorData[i++];
-      executor.execute(context, transform, rotation, snapToPixel);
+      executor.execute(context, 1, transform, rotation, snapToPixel);
     }
   }
 }

src/ol/renderer/canvas/VectorLayer.js

@@ -225,6 +225,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const declutterReplays = this.getLayer().getDeclutter() ? {} : null;
     replayGroup.execute(
       context,
+      1,
       transform,
       rotation,
       snapToPixel,
@@ -255,6 +256,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         );
         replayGroup.execute(
           context,
+          1,
           transform,
           rotation,
           snapToPixel,
@@ -279,6 +281,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         );
         replayGroup.execute(
           context,
+          1,
           transform,
           rotation,
           snapToPixel,

src/ol/renderer/canvas/VectorTileLayer.js

@@ -665,6 +665,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         }
         executorGroup.execute(
           context,
+          1,
           transform,
           rotation,
           hifi,
@@ -813,6 +814,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       const executorGroup = executorGroups[i];
       executorGroup.execute(
         context,
+        renderScale,
         transform,
         0,
         true,

test/spec/ol/render/canvas/textbuilder.test.js

@@ -35,7 +35,7 @@ function executeInstructions(
   const executor = new Executor(0.02, 1, false, builder.finish());
   sinon.spy(executor, 'drawLabelWithPointPlacement_');
   const replayImageOrLabelStub = sinon.stub(executor, 'replayImageOrLabel_');
-  executor.execute(context, transform);
+  executor.execute(context, 1, transform);
   expect(executor.drawLabelWithPointPlacement_.callCount).to.be(
     expectedDrawTextImageCalls
   );

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

@@ -40,7 +40,7 @@ describe('ol.render.canvas.BuilderGroup', function () {
         !!overlaps,
         builder.finish()
       );
-      executor.execute(context, transform, 0, false);
+      executor.execute(context, 1, transform, 0, false);
     }
 
     beforeEach(function () {