Skip to content

Commit cb89a63

Browse files
committed
Fix issue where scaleDown() and scaleUp() could sometimes return a float that would then get incorrectly rounded down when creating a canvas.
1 parent bf76dd7 commit cb89a63

File tree

1 file changed

+18
-4
lines changed

1 file changed

+18
-4
lines changed

js/load-image-scale.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,15 @@
158158
(minHeight || destHeight) / destHeight
159159
)
160160
if (scale > 1) {
161-
destWidth *= scale
162-
destHeight *= scale
161+
/**
162+
* These value are used to create canvas elements. Ensuring that they are integers
163+
* (rather than floats) avoids a potential 1px rounding error in the canvas element
164+
* as canvas elements will always round it down to the nearest integer rather than
165+
* following standard rounding rules. For example, using a value of 199.9999999px
166+
* for a canvas height would result in a height of 199px rather than 200px.
167+
*/
168+
destWidth = Math.round(destWidth * scale)
169+
destHeight = Math.round(destHeight * scale)
163170
}
164171
}
165172
/**
@@ -171,8 +178,15 @@
171178
(maxHeight || destHeight) / destHeight
172179
)
173180
if (scale < 1) {
174-
destWidth *= scale
175-
destHeight *= scale
181+
/**
182+
* These value are used to create canvas elements. Ensuring that they are integers
183+
* (rather than floats) avoids a potential 1px rounding error in the canvas element
184+
* as canvas elements will always round it down to the nearest integer rather than
185+
* following standard rounding rules. For example, using a value of 199.9999999px
186+
* for a canvas height would result in a height of 199px rather than 200px.
187+
*/
188+
destWidth = Math.round(destWidth * scale)
189+
destHeight = Math.round(destHeight * scale)
176190
}
177191
}
178192
if (useCanvas) {

0 commit comments

Comments
 (0)