round canvas.style dimensions to avoid blurring

When canvas.height and canvas.width are set, the numbers are rounded to
integers. The same rounding must be applied to canvas.style.height and
canvas.style.width to avoid scaling of the canvas which would lead to
blurring.

Acknowledging that canvas.height and canvas.width are integers, the
framebuffer is now only redrawn if those integer values change.

src/core/core.controller.js

@@ -246,19 +246,13 @@ class Chart {
     const canvas = me.canvas;
     const aspectRatio = options.maintainAspectRatio && me.aspectRatio;
     const newSize = me.platform.getMaximumSize(canvas, width, height, aspectRatio);
-
-    // detect devicePixelRation changes
-    const oldRatio = me.currentDevicePixelRatio;
     const newRatio = options.devicePixelRatio || me.platform.getDevicePixelRatio();
 
-    if (me.width === newSize.width && me.height === newSize.height && oldRatio === newRatio) {
-      return;
-    }
-
     me.width = newSize.width;
     me.height = newSize.height;
     me._aspectRatio = me.aspectRatio;
-    retinaScale(me, newRatio, true);
+    if (!retinaScale(me, newRatio, true))
+      return;
 
     me.notifyPlugins('resize', {size: newSize});
 

src/helpers/helpers.dom.js

@@ -1,5 +1,9 @@
 import {INFINITY} from './helpers.math';
 
+/**
+ * @typedef { import("../core/core.controller").default } Chart
+ */
+
 /**
  * @private
  */
@@ -150,20 +154,41 @@ export function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
   };
 }
 
-export function retinaScale(chart, forceRatio, forceStyle) {
-  const pixelRatio = chart.currentDevicePixelRatio = forceRatio || 1;
-  const {canvas, width, height} = chart;
+/**
+ * @param {Chart} chart
+ * @param {number} [forceRatio]
+ * @param {boolean} [forceStyle]
+ * @returns {boolean} True if redraw is needed.
+ */
+ export function retinaScale(chart, forceRatio, forceStyle) {
+  const pixelRatio = forceRatio || 1;
+  const devHeight = Math.floor(chart.height * pixelRatio);
+  const devWidth  = Math.floor(chart.width  * pixelRatio);
 
-  canvas.height = height * pixelRatio;
-  canvas.width = width * pixelRatio;
-  chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  // update css dimensions based on floored device dimentions
+  chart.height = devHeight / pixelRatio;
+  chart.width  = devWidth  / pixelRatio;
+
+  const canvas = chart.canvas;
 
   // 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 && (forceStyle || (!canvas.style.height && !canvas.style.width))) {
-    canvas.style.height = height + 'px';
-    canvas.style.width = width + 'px';
+    canvas.style.height = `${chart.height}px`;
+    canvas.style.width  = `${chart.width}px`;
+  }
+
+  if (chart.currentDevicePixelRatio !== pixelRatio
+      || canvas.height !== devHeight
+      || canvas.width  !== devWidth) {
+    chart.currentDevicePixelRatio = pixelRatio;
+    canvas.height = devHeight;
+    canvas.width  = devWidth;
+    chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+    return true;
+  } else {
+    return false;
   }
 }