Fix updating retinaScale (#6971)

* Fix updating retinaScale
* Destructure

diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index 939e4bbe8c76317a5d0d8fcf95b52bd23392ed67..4db17b6dc5b7939693c2182ba0821cd89e61c137 100644 (file)
--- a/src/helpers/helpers.dom.js
+++ b/src/helpers/helpers.dom.js
@@ -152,24 +152,18 @@ export function getMaximumHeight(domNode) {
 }
 
 export function retinaScale(chart, forceRatio) {
-       var pixelRatio = chart.currentDevicePixelRatio = forceRatio || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
-       if (pixelRatio === 1) {
-               return;
-       }
-
-       var canvasElement = chart.canvas;
-       var height = chart.height;
-       var width = chart.width;
+       const pixelRatio = chart.currentDevicePixelRatio = forceRatio || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+       const {canvas, width, height} = chart;
 
-       canvasElement.height = height * pixelRatio;
-       canvasElement.width = width * pixelRatio;
-       chart.ctx.scale(pixelRatio, pixelRatio);
+       canvas.height = height * pixelRatio;
+       canvas.width = width * pixelRatio;
+       chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
 
        // 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 (!canvasElement.style.height && !canvasElement.style.width) {
-               canvasElement.style.height = height + 'px';
-               canvasElement.style.width = width + 'px';
+       if (!canvas.style.height && !canvas.style.width) {
+               canvas.style.height = height + 'px';
+               canvas.style.width = width + 'px';
        }
 }