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 f028bf0977512abb08726129da99d8b482234d14..26a0617d8133c286b6e8da4e382a3e6c121e6db4 100644 (file)
--- 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 83067af44772f899768f571e31ba82ae20e006e5..b30ff926d6fe6b4388b72a7d9c0b3aafbe4907aa 100644 (file)
--- 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 ea032113d1b8a6765605a06b60824f095fe77c8f..4a06c9f80adc9c799e0d653ecd45b6612b4fca82 100644 (file)
--- 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 98482ab6a43f7d4aee974407a9fe6f8c6754e261..ba438d608922a4af099638859ba35e8b18f80b14 100644 (file)
--- 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;