From df493725c6489c1112ec8ad48287f42c1f265bec Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Mon, 30 Aug 2021 21:53:46 +0200
Subject: [PATCH] Fix sprite offset for pixel ratio !== 1

---
 src/ol/render/canvas/ImageBuilder.js          |   4 +-
 test/rendering/cases/icon-sprite/expected.png | Bin 0 -> 1721 bytes
 test/rendering/cases/icon-sprite/main.js      |  37 ++++++++++++++++++
 test/rendering/data/sprites/gis_symbols.png   | Bin 0 -> 904 bytes
 test/rendering/webpack.config.js              |   5 +++
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 test/rendering/cases/icon-sprite/expected.png
 create mode 100644 test/rendering/cases/icon-sprite/main.js
 create mode 100644 test/rendering/data/sprites/gis_symbols.png

diff --git a/src/ol/render/canvas/ImageBuilder.js b/src/ol/render/canvas/ImageBuilder.js
index 9df168dce5..8407fc560b 100644
--- a/src/ol/render/canvas/ImageBuilder.js
+++ b/src/ol/render/canvas/ImageBuilder.js
@@ -249,8 +249,8 @@ class CanvasImageBuilder extends CanvasBuilder {
     this.image_ = image;
     this.height_ = size[1];
     this.opacity_ = imageStyle.getOpacity();
-    this.originX_ = origin[0];
-    this.originY_ = origin[1];
+    this.originX_ = origin[0] * this.imagePixelRatio_;
+    this.originY_ = origin[1] * this.imagePixelRatio_;
     this.rotateWithView_ = imageStyle.getRotateWithView();
     this.rotation_ = imageStyle.getRotation();
     this.scale_ = imageStyle.getScaleArray();
diff --git a/test/rendering/cases/icon-sprite/expected.png b/test/rendering/cases/icon-sprite/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1aa18b3b8c5329cea70ae6a0e5e34e013c52ced
GIT binary patch
literal 1721
zcmeH||1;Zn9LL{56+<`bOp{ycE@E4AtkDrC5tLeXigP2)s^&VQT*ZW`3`tr}r&=^A
z5lyAHyJ?Sz;Zj0XZkc33XiqyOGGCI&se~q>#JB9@f7tD({`7i1@Ab>;^?JPS`Kn1y
zjQ4Om;RXQkAbk~^0sst3VZg;13hA`R*@vnqB|Zj-CJ-wCI2Vy(qrWNTo93eP5M&3r
zxl5grg+cjwjltm_Rj>%uhdr+0*L^d#JtNO~HhjPBnNhmveTA#4dR^;;;os4@YMUAw
zel2;086f-pGF0>B#@25B37@W(z*sxIy?vTfh){sWHZlRW@Wurk_XeM$L2?3k*bJgh
z!&sLcz=#vL<@&zxpRc4_+|de<FK}osS6SXF><n04Rc6s%^)9)&O55QIoe?8blH^lU
z>7O977{&L*8jWz>^h1w?xAJ!yO<Vo(aW7VCs2~T2A2(YK^nD|xF5}s_?P}9CD_zvt
zso$AMELqo#X>K0t-Cu}q>njLObAH);TZ_xsL~X<O%<)0YgYaPjo$Z?>Sk|fTyZid`
z+|Qy(a+J2XWkr7O2~{(?A74*1n6*NtInJUCBooRay<ivOtn?t}&S&<WgWadI^OH7n
zVQ95~7{`c`+|^-}7^NEJJC!RcC@>)BE4W>ZZU5Ep7`Xw-e_UdvhSd3a9<!=Bfpqb(
zpmqi$@HqP{(UQ;ZV(%5%cA&^94|SI`t1Nj;;$drxZ+|Q_u^IzG$FdQlm=qXBrXGb8
zBPSkdn+w>+fSH7zyIB>s0SW%#JUdBo+MrO-%^SIO0%Fp{gvdx<(0;`73E}f~o4q;V
zbSoMzYnbHBjW6Y`3%blnO^O1v4X>1cp@XJ>%6JE@Td8<}BgcR=B`zCJP`w!A`UM5i
zLX;-d^gl(jVtxO8Qgv-DVyK*F-gr3-JK~htn4Yn0SvYCvrJ!XE4=_!;>w|+tN}Za7
z^{eJjW=rt63-~jCe(lXl#R_sDh!7hzCEa9yPJCM&&S2{_mI|!Eeknw6uL450SS&QH
zEziz=E5}ebJ&>huen$||k|*WJJ_oV@s&8&W7jOtxzH+7)#if)#wvYBB!p4>sAFf73
zQ0CPajXs&bxk^9hC17Xf#@B|*c+{)9e6|d=4)s5%@9!hE!QnGQ*Md2!^JR{1F49{(
zYQBC=c5`Onr&AC$hH9yjFliS#$@S(w5~OORofrFPTZ^(0XaBTTAZ&q$^+4COM*R8S
zs#<NUz$)uWo@_o^^4DbvvwP2W64DGo0<EGfVhc$aeOGz3R&!m5C)3kZS?m>)T4LQU
zJg|-hAM$4+kp`XPmctx<ueAHrbIb4zRaD0)H7b$?gxL9`(lQrmyY)`g-VxZ9r3jeK
l8!{uRW6XO``XAi*;DhPPl9JaXX+89d04XjpRuq$Y<6m`9o9qAp

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/icon-sprite/main.js b/test/rendering/cases/icon-sprite/main.js
new file mode 100644
index 0000000000..1bc07961e7
--- /dev/null
+++ b/test/rendering/cases/icon-sprite/main.js
@@ -0,0 +1,37 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
+import {Vector as VectorLayer} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource} from '../../../../src/ol/source.js';
+
+const center = [0, 0];
+
+new Map({
+  pixelRatio: 2,
+  layers: [
+    new VectorLayer({
+      style: function () {
+        return new Style({
+          image: new Icon({
+            src: '/data/sprites/gis_symbols.png',
+            color: [255, 0, 0, 1],
+            offset: [32, 0],
+            size: [32, 32],
+          }),
+        });
+      },
+      source: new VectorSource({
+        features: [new Feature(new Point(center))],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 2,
+  }),
+});
+
+render();
diff --git a/test/rendering/data/sprites/gis_symbols.png b/test/rendering/data/sprites/gis_symbols.png
new file mode 100644
index 0000000000000000000000000000000000000000..af31fa96b3d558d3881d34b33a57c134fb004b14
GIT binary patch
literal 904
zcmeAS@N?(olHy`uVBq!ia0vp^4nVBH!3-p)I`?e@QjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W<uUfKP}kP;wC%ELgArNG}9~`Sa&P7^_#W1`3`!bqdIZD0}(xB}5j&
zUAuPe|NsAI&YTHRf9A{?AY=RX?I%y3ynXvNP|fStuh*?x_vq0hAbb7#^}m1r23mCP
z+&Lik&6_uyHf;i$cJbmxpssiC-T}!iTee)kejTXh(xpqke*HRj>=;n+!-o&swrvA4
zmM&ciB!K|p1|SKy8Yl?&0)zpy0w_3p_Uw7{=7IEp6#z+~I9w%=4O9R$2gm>dh-p>R
z%_@Q65>pc77tAp2we$ZOZ(V1-|L^`^FLciTh$G)V{{PQE*Yp1^pwH(6@t6Pqz5g%#
z|KIoj;{QMX|Mvq5E&c!h*Z(I^1J+7NZd_Jg^XHn|gP=v?N~>3t)c*^+9kO0gcT*>8
zm-D0$Utl~e^>lFzshG2LN_zAm1Cdt2xWK?P(+(pRQI}Lrt#^Ax#ozt^Z}0Q+u(Gb^
z>gUeY`R8`3Z_gB(e!6F(;B@01ch9}DeNdQUz_qxKXU~JuAp5o>GnktT?<U-7Jjh}v
zFMRmA|Dh`)KDR#pYuLZrQNT%&L+fOL%jEmZT@S_bESo8q)RxIAI(KR7%@wh=JkMHY
zG)JWW-Ls}geNyL+n)A0Umn1lLuzHjR6#Xl4dvRh(D!&<9x6aE+s$y$>BChFkGoQZX
zxR)>T#LF(36x|ROqeZPeE>qaFCtPQ(jMx|;Rrs;rV%8;x<f{T}qFC!Zwn(ZtY?Z&3
za93c>;aQzr4x7#@a5A<!GIq5s;AmB}(g>WEvQ$Yv)vI~^LAIQ(S7JG#N7Zs>oT&SE
z$m~r^)~~R&tz`+fUA}GRFIyS<E#W`IH!ah$vpMhQR%ldD-z+aXf6gTye&3S!n+vYl
zWIV5`xX5$<OwIYr6`C_wXDgq(cjC#VRWIt~?|8j?w{NPg&8aWjg0DVxTXi_N`X5iJ
z^;#kQ@M+y2zP?SJ@ax#`_R<%hR~t4Q+@AF2dHDpfw&U_lTMRsBICt3t69$8)tDnm{
Hr-UW|8O7aG

literal 0
HcmV?d00001

diff --git a/test/rendering/webpack.config.js b/test/rendering/webpack.config.js
index 278434bd45..88127d5ba4 100644
--- a/test/rendering/webpack.config.js
+++ b/test/rendering/webpack.config.js
@@ -42,6 +42,11 @@ export default {
     ],
   },
   resolve: {
+    fallback: {
+      fs: false,
+      http: false,
+      https: false,
+    },
     alias: {
       // ol-mapbox-style imports ol/style/Style etc
       ol: path.join(baseDir, '..', '..', 'src', 'ol'),