Skip to content

Commit de4caf6

Browse files
committed
Use integer canvas dimensions
As a result of #12097, the HTMLCanvasElement's `width` and `height` (which are always integers - see [MDN][1]) may be compared to fractional `deviceWidth` and `deviceHeight`, resulting in extra resize and update events being fired. This PR rounds the dimensions for purposes of comparing to the canvas element's, which should put the behavior closer to Chart.js 4.5.0 and earlier. I've tested this against #11224, my own code (which was generating errors due to an interaction between these extra events and some internal plugins), and https://codepen.io/joshkel/pen/azdjLGZ, and it seems to work. [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#instance_properties
1 parent e8c58da commit de4caf6

File tree

1 file changed

+6
-4
lines changed

1 file changed

+6
-4
lines changed

src/helpers/helpers.dom.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -227,12 +227,14 @@ export function retinaScale(
227227
canvas.style.width = `${chart.width}px`;
228228
}
229229

230+
const canvasHeight = Math.floor(deviceHeight);
231+
const canvasWidth = Math.floor(deviceWidth);
230232
if (chart.currentDevicePixelRatio !== pixelRatio
231-
|| canvas.height !== deviceHeight
232-
|| canvas.width !== deviceWidth) {
233+
|| canvas.height !== canvasHeight
234+
|| canvas.width !== canvasWidth) {
233235
(chart as PrivateChart).currentDevicePixelRatio = pixelRatio;
234-
canvas.height = deviceHeight;
235-
canvas.width = deviceWidth;
236+
canvas.height = canvasHeight;
237+
canvas.width = canvasWidth;
236238
chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
237239
return true;
238240
}

0 commit comments

Comments
 (0)