From ab3c4b6e1b45a5930479e8b9bb324df7ad5b2295 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 16 Feb 2021 11:27:48 +0200 Subject: [PATCH 1/3] Round canvas size to 0.1px resolution --- src/core/core.controller.js | 11 +++-------- src/helpers/helpers.dom.js | 12 +++++++----- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 83067af4477..b30ff926d6f 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 ea032113d1b..4a06c9f80ad 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'; } From 90ca8896c880e1e5a3db5ab21bcd4b41834c2010 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 16 Feb 2021 11:45:31 +0200 Subject: [PATCH 2/3] Types + docs --- docs/docs/getting-started/v3-migration.md | 1 + types/helpers/helpers.dom.d.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index f028bf09775..c078f9bb94a 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 `forseStyle`, which forces overriding current canvas style. `forceRatio` no longer falls back to `window.devicePixelRatio`, instead it defaults to `1`. #### Platform diff --git a/types/helpers/helpers.dom.d.ts b/types/helpers/helpers.dom.d.ts index 98482ab6a43..ba438d60892 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; From bf0564fdf488ce9851a43a585c05bd3f5ded899e Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 16 Feb 2021 15:18:36 +0200 Subject: [PATCH 3/3] typofix --- docs/docs/getting-started/v3-migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index c078f9bb94a..26a0617d813 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -496,7 +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 `forseStyle`, which forces overriding current canvas style. `forceRatio` no longer falls back to `window.devicePixelRatio`, instead it defaults to `1`. +* `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