From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Tue, 16 Feb 2021 13:30:40 +0000 (+0200)
Subject: Round canvas size to 0.1px resolution (#8437)
X-Git-Tag: v3.0.0-beta.11~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9fb87a4fc20f7b77bf05310c8087e1805a78c937;p=thirdparty%2FChart.js.git

Round canvas size to 0.1px resolution (#8437)

* Round canvas size to 0.1px resolution
* Types + docs
* typofix
---

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index f028bf097..26a0617d8 100644
--- a/docs/docs/getting-started/v3-migration.md
+++ b/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
 
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 83067af44..b30ff926d 100644
--- a/src/core/core.controller.js
+++ b/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});
 
diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index ea032113d..4a06c9f80 100644
--- a/src/helpers/helpers.dom.js
+++ b/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';
   }
diff --git a/types/helpers/helpers.dom.d.ts b/types/helpers/helpers.dom.d.ts
index 98482ab6a..ba438d608 100644
--- a/types/helpers/helpers.dom.d.ts
+++ b/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;