Hit detect everything with a pixel ratio of 1

src/ol/render/canvas/ImageBuilder.js

@@ -163,20 +163,17 @@ class CanvasImageBuilder extends CanvasBuilder {
       myEnd,
       this.hitDetectionImage_,
       // Remaining arguments to DRAW_IMAGE are in alphabetical order
-      this.anchorX_ * this.imagePixelRatio_,
-      this.anchorY_ * this.imagePixelRatio_,
+      this.anchorX_,
+      this.anchorY_,
       this.declutterGroups_,
-      Math.ceil(this.height_ * this.imagePixelRatio_),
+      this.height_,
       this.opacity_,
       this.originX_,
       this.originY_,
       this.rotateWithView_,
       this.rotation_,
-      [
-        (this.scale_[0] * this.pixelRatio) / this.imagePixelRatio_,
-        (this.scale_[1] * this.pixelRatio) / this.imagePixelRatio_,
-      ],
-      Math.ceil(this.width_ * this.imagePixelRatio_),
+      this.scale_,
+      this.width_,
     ]);
     this.endGeometry(feature);
   }
@@ -226,20 +223,17 @@ class CanvasImageBuilder extends CanvasBuilder {
       myEnd,
       this.hitDetectionImage_,
       // Remaining arguments to DRAW_IMAGE are in alphabetical order
-      this.anchorX_ * this.imagePixelRatio_,
-      this.anchorY_ * this.imagePixelRatio_,
+      this.anchorX_,
+      this.anchorY_,
       this.declutterGroups_,
-      Math.ceil(this.height_ * this.imagePixelRatio_),
+      this.height_,
       this.opacity_,
       this.originX_,
       this.originY_,
       this.rotateWithView_,
       this.rotation_,
-      [
-        (this.scale_[0] * this.pixelRatio) / this.imagePixelRatio_,
-        (this.scale_[1] * this.pixelRatio) / this.imagePixelRatio_,
-      ],
-      Math.ceil(this.width_ * this.imagePixelRatio_),
+      this.scale_,
+      this.width_,
     ]);
     this.endGeometry(feature);
   }
@@ -273,7 +267,7 @@ class CanvasImageBuilder extends CanvasBuilder {
   setImageStyle(imageStyle, declutterGroups) {
     const anchor = imageStyle.getAnchor();
     const size = imageStyle.getSize();
-    const hitDetectionImage = imageStyle.getHitDetectionImage(this.pixelRatio);
+    const hitDetectionImage = imageStyle.getHitDetectionImage();
     const image = imageStyle.getImage(this.pixelRatio);
     const origin = imageStyle.getOrigin();
     this.imagePixelRatio_ = imageStyle.getPixelRatio(this.pixelRatio);

src/ol/style/Icon.js

@@ -352,11 +352,10 @@ class Icon extends ImageStyle {
   }
 
   /**
-   * @param {number} pixelRatio Pixel ratio.
    * @return {HTMLImageElement|HTMLCanvasElement} Image element.
    */
-  getHitDetectionImage(pixelRatio) {
-    return this.iconImage_.getHitDetectionImage(pixelRatio);
+  getHitDetectionImage() {
+    return this.iconImage_.getHitDetectionImage();
   }
 
   /**

src/ol/style/IconImage.js

@@ -28,9 +28,9 @@ class IconImage extends EventTarget {
 
     /**
      * @private
-     * @type {Object<number, HTMLImageElement|HTMLCanvasElement>}
+     * @type {HTMLImageElement|HTMLCanvasElement}
      */
-    this.hitDetectionImage_ = {};
+    this.hitDetectionImage_ = null;
 
     /**
      * @private
@@ -162,27 +162,21 @@ class IconImage extends EventTarget {
   }
 
   /**
-   * @param {number} pixelRatio Pixel ratio.
    * @return {HTMLImageElement|HTMLCanvasElement} Image element.
    */
-  getHitDetectionImage(pixelRatio) {
-    if (!this.hitDetectionImage_[pixelRatio]) {
+  getHitDetectionImage() {
+    if (!this.hitDetectionImage_) {
       if (this.isTainted_()) {
-        const usedPixelRatio = this.color_ ? pixelRatio : 1;
         const width = this.size_[0];
         const height = this.size_[1];
-        const context = createCanvasContext2D(
-          Math.ceil(width * usedPixelRatio),
-          Math.ceil(height * usedPixelRatio)
-        );
-        context.scale(usedPixelRatio, usedPixelRatio);
+        const context = createCanvasContext2D(width, height);
         context.fillRect(0, 0, width, height);
-        this.hitDetectionImage_[pixelRatio] = context.canvas;
+        this.hitDetectionImage_ = context.canvas;
       } else {
-        this.hitDetectionImage_[pixelRatio] = this.image_;
+        this.hitDetectionImage_ = this.image_;
       }
     }
-    return this.hitDetectionImage_[pixelRatio];
+    return this.hitDetectionImage_;
   }
 
   /**

src/ol/style/Image.js

@@ -154,10 +154,9 @@ class ImageStyle {
 
   /**
    * @abstract
-   * @param {number} pixelRatio Pixel ratio.
    * @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
    */
-  getHitDetectionImage(pixelRatio) {
+  getHitDetectionImage() {
     return abstract();
   }
 

src/ol/style/RegularShape.js

@@ -79,9 +79,9 @@ class RegularShape extends ImageStyle {
 
     /**
      * @private
-     * @type {Object<number, HTMLCanvasElement>}
+     * @type {HTMLCanvasElement}
      */
-    this.hitDetectionCanvas_ = {};
+    this.hitDetectionCanvas_ = null;
 
     /**
      * @private
@@ -204,16 +204,15 @@ class RegularShape extends ImageStyle {
   }
 
   /**
-   * @param {number} pixelRatio Pixel ratio.
    * @return {HTMLCanvasElement} Image element.
    */
-  getHitDetectionImage(pixelRatio) {
-    if (!this.hitDetectionCanvas_[pixelRatio || 1]) {
+  getHitDetectionImage() {
+    if (!this.hitDetectionCanvas_) {
       const renderOptions = this.createRenderOptions();
 
-      this.createHitDetectionCanvas_(renderOptions, pixelRatio || 1);
+      this.createHitDetectionCanvas_(renderOptions);
     }
-    return this.hitDetectionCanvas_[pixelRatio || 1];
+    return this.hitDetectionCanvas_;
   }
 
   /**
@@ -410,7 +409,7 @@ class RegularShape extends ImageStyle {
     const displacement = this.getDisplacement();
 
     this.hitDetectionImageSize_ = [renderOptions.size, renderOptions.size];
-    this.createHitDetectionCanvas_(renderOptions, 1);
+    this.createHitDetectionCanvas_(renderOptions);
 
     this.anchor_ = [size / 2 - displacement[0], size / 2 + displacement[1]];
     this.size_ = [size, size];
@@ -488,10 +487,9 @@ class RegularShape extends ImageStyle {
   /**
    * @private
    * @param {RenderOptions} renderOptions Render options.
-   * @param {number} pixelRatio The pixel ratio.
    */
-  createHitDetectionCanvas_(renderOptions, pixelRatio) {
-    this.hitDetectionCanvas_[pixelRatio] = this.getImage(pixelRatio);
+  createHitDetectionCanvas_(renderOptions) {
+    this.hitDetectionCanvas_ = this.getImage(1);
     if (this.fill_) {
       let color = this.fill_.getColor();
 
@@ -509,12 +507,12 @@ class RegularShape extends ImageStyle {
         // if a transparent fill style is set, create an extra hit-detection image
         // with a default fill style
         const context = createCanvasContext2D(
-          renderOptions.size * pixelRatio,
-          renderOptions.size * pixelRatio
+          renderOptions.size,
+          renderOptions.size
         );
-        this.hitDetectionCanvas_[pixelRatio] = context.canvas;
+        this.hitDetectionCanvas_ = context.canvas;
 
-        this.drawHitDetectionCanvas_(renderOptions, context, 0, 0, pixelRatio);
+        this.drawHitDetectionCanvas_(renderOptions, context, 0, 0);
       }
     }
   }
@@ -525,13 +523,9 @@ class RegularShape extends ImageStyle {
    * @param {CanvasRenderingContext2D} context The context.
    * @param {number} x The origin for the symbol (x).
    * @param {number} y The origin for the symbol (y).
-   * @param {number} pixelRatio The pixel ratio.
    */
-  drawHitDetectionCanvas_(renderOptions, context, x, y, pixelRatio) {
-    // reset transform
-    context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-
-    // then move to (x, y)
+  drawHitDetectionCanvas_(renderOptions, context, x, y) {
+    // move to (x, y)
     context.translate(x, y);
 
     context.beginPath();