Round canvas size to 0.1px resolution

docs/docs/getting-started/v3-migration.md

@@ -496,6 +496,7 @@ All helpers are now exposed in a flat hierarchy, e.g., `Chart.helpers.canvas.cli
 * `helpers.getMaximumHeight` was replaced by `helpers.dom.getMaximumSize`
 * `helpers.getMaximumWidth` was replaced by `helpers.dom.getMaximumSize`
 * `helpers.clear` was renamed to `helpers.clearCanvas` and now takes `canvas` and optionally `ctx` as parameter(s).
+* `helpers.retinaScale` accepts optional third parameter `forceStyle`, which forces overriding current canvas style. `forceRatio` no longer falls back to `window.devicePixelRatio`, instead it defaults to `1`.
 
 #### Platform
 

src/core/core.controller.js

@@ -233,14 +233,9 @@ class Chart {
       return;
     }
 
-    canvas.width = me.width = newSize.width;
-    canvas.height = me.height = newSize.height;
-    if (canvas.style) {
-      canvas.style.width = newSize.width + 'px';
-      canvas.style.height = newSize.height + 'px';
-    }
-
-    retinaScale(me, newRatio);
+    me.width = newSize.width;
+    me.height = newSize.height;
+    retinaScale(me, newRatio, true);
 
     me.notifyPlugins('resize', {size: newSize});
 

src/helpers/helpers.dom.js

@@ -119,6 +119,8 @@ function getContainerSize(canvas, width, height) {
   };
 }
 
+const round1 = v => Math.round(v * 10) / 10;
+
 export function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
   const style = getComputedStyle(canvas);
   const margins = getPositionedStyle(style, 'margin');
@@ -136,13 +138,13 @@ export function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
   width = Math.max(0, width - margins.width);
   height = Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height - margins.height);
   return {
-    width: Math.min(width, maxWidth, containerSize.maxWidth),
-    height: Math.min(height, maxHeight, containerSize.maxHeight)
+    width: round1(Math.min(width, maxWidth, containerSize.maxWidth)),
+    height: round1(Math.min(height, maxHeight, containerSize.maxHeight))
   };
 }
 
-export function retinaScale(chart, forceRatio) {
-  const pixelRatio = chart.currentDevicePixelRatio = forceRatio || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+export function retinaScale(chart, forceRatio, forceStyle) {
+  const pixelRatio = chart.currentDevicePixelRatio = forceRatio || 1;
   const {canvas, width, height} = chart;
 
   canvas.height = height * pixelRatio;
@@ -152,7 +154,7 @@ export function retinaScale(chart, forceRatio) {
   // If no style has been set on the canvas, the render size is used as display size,
   // making the chart visually bigger, so let's enforce it to the "correct" values.
   // See https://github.com/chartjs/Chart.js/issues/3575
-  if (canvas.style && !canvas.style.height && !canvas.style.width) {
+  if (canvas.style && (forceStyle || (!canvas.style.height && !canvas.style.width))) {
     canvas.style.height = height + 'px';
     canvas.style.width = width + 'px';
   }

types/helpers/helpers.dom.d.ts

@@ -12,5 +12,6 @@ export function retinaScale(
 		readonly height: number;
 		readonly ctx: CanvasRenderingContext2D;
 	},
-	forceRatio: number
+  forceRatio: number,
+  forceStyle?: boolean
 ): void;