function resize() { var canvas = document.getElementById("canvas"); // Rescale the canvas var METHOD = 0; var dipRect = canvas.getBoundingClientRect(); switch (METHOD) { case 0: // Incorrect: canvas.width = devicePixelRatio * d

HTML

<canvas method="0" style="position: absolute; left: 1px; top: 10px; width: 8px; height: 10px"></canvas>
        <canvas method="1" style="position: absolute; left: 1px; top: 25px; width: 8px; height: 10px"></canvas>
        <canvas method="2" style="position: absolute; left: 1px; top: 40px; width: 8px; height: 10px"></canvas>
        <canvas method="3" style="position: absolute; left: 1px; top: 55px; width: 8px; height: 10px"></canvas>

JavaScript

function resize() {
            var canvases = document.getElementsByTagName("canvas");
            var i, j;
            for (i = 0; i != canvases.length; ++ i) {
              var canvas = canvases[i];
              var method = canvas.getAttribute("method");
              var dipRect = canvas.getBoundingClientRect();
              var context = canvas.getContext("2d");
              switch (method) {
                case "0":
                  // Incorrect:
                  canvas.width = devicePixelRatio * dipRect.width;
                  canvas.height = devicePixelRatio * dipRect.height;
                  break;

                case "1":
                  // Incorrect:
                  canvas.width = Math.round(devicePixelRatio * dipRect.width);
                  canvas.height = Math.round(devicePixelRatio * dipRect.height);
                  break;

                case "2":
                  // Incorrect:
                  canvas.width = Math.floor(devicePixelRatio * dipRect.width);
                  canvas.height = Math.floor(devicePixelRatio * dipRect.height);
                  break;

                case "3":
                  // Correct:
                  canvas.width = Math.round(devicePixelRatio * dipRect.right)
                    - Math.round(devicePixelRatio * dipRect.left);
                  canvas.height = Math.round(devicePixelRatio * dipRect.bottom)
                    - Math.round(devicePixelRatio * dipRect.top);
                  break;
              }
              console.log("method " + method
                + ", devicePixelRatio " + devicePixelRatio
                + ", client rect (DI px) (" + dipRect.left + ", " + dipRect.top + ")"
                + ", " + dipRect.width + " x " + dipRect.height
                + ", canvas width, height (logical px) " + canvas.width + ", " + canvas.height);

              context.clearRect(0, 0, canvas.width, canvas.height);
              context.fillStyle = "cyan";
             ...