在所有设备上显示像素完美的画布

let totalWidth = 0;
let totalDeviceWidth = 0;
document.querySelectorAll(".split>*").forEach(elem => {
  const rect = elem.getBoundingClientRect();
  const width = rect.width;
  const deviceWidth = width * devicePixelRatio;
  totalWidth += width;
  totalDeviceWidth += deviceWidth;
  log(`${elem.className.padEnd(6)}: width = ${width}, deviceWidth: ${deviceWidth}`);
});

const elem = document.querySelector('.split');
const rect = elem.getBoundingClientRect();
const width = rect.width;
const deviceWidth = width * devicePixelRatio;

log(`
totalWidth      : ${totalWidth}
totalDeviceWidth: ${totalDeviceWidth}

elemWidth       : ${width}
elemDeviceWidth : ${deviceWidth}`);

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

.split {
  width: 299px;
  display: flex;
}
.split>* {
  flex: 1 1 auto;
  height: 50px;
}
.left {
  background: pink;
}
.middle {
  background: lightgreen;
}
.right {
  background: lightblue;
}
pre { margin: 0; } 

<div class="split">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
  

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    let good = false;
    if (entry.devicePixelContentBoxSize) {
      // NOTE: Only this path gives the correct answer
      // The other paths are imperfect fallbacks
      // for browsers that don't provide anyway to do this
      width = entry.devicePixelContentBoxSize[0].inlineSize;
      height = entry.devicePixelContentBoxSize[0].blockSize;
      good = true;
    } else {
      if (entry.contentBoxSize) {
        if (entry.contentBoxSize[0]) {
          width = entry.contentBoxSize[0].inlineSize;
          height = entry.contentBoxSize[0].blockSize;
        } else {
          width = entry.contentBoxSize.inlineSize;
          height = entry.contentBoxSize.blockSize;
        }
      } else {
        width = entry.contentRect.width;
        height = entry.contentRect.height;
      }
      width *= devicePixelRatio;
      height *= devicePixelRatio;
    }
    log(`${entry.target.className.padEnd(6)}: width = ${width} measure = ${good ? "good" : "bad (not accurate)"}`);    
  }
});

document.querySelectorAll('.split>*').forEach(elem => {
  observer.observe(elem);
});

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

.split {
  width: 299px;
  display: flex;
}
.split>* {
  flex: 1 1 auto;
  height: 50px;
}
.left {
  background: pink;
}
.middle {
  background: lightgreen;
}
.right {
  background: lightblue;
}
pre { margin: 0; }

<div class="split">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

const px = v => `${v}px`;

const canvas = document.querySelector('canvas');
resizeCanvas(canvas);
draw(canvas);

window.addEventListener('resize', () => {
  resizeCanvas(canvas);
  draw(canvas);
});

function resizeCanvas(canvas) {
  // how many devicePixels per pixel in the canvas we want
  // you can set this to 1 if you always want 1 device pixel to 1 canvas pixel
  const pixelSize = Math.max(1, devicePixelRatio) | 0;  
  
  const rect = canvas.parentElement.getBoundingClientRect();
  const deviceWidth  = rect.width * devicePixelRatio | 0;
  const deviceHeight = rect.height * devicePixelRatio | 0;
  const pixelsAcross = deviceWidth / pixelSize | 0;
  const pixelsDown   = deviceHeight / pixelSize | 0;
  const devicePixelsAcross = pixelsAcross * pixelSize;
  const devicePixelsDown   = pixelsDown   * pixelSize;
  canvas.style.width = px(devicePixelsAcross / devicePixelRatio);
  canvas.style.height = px(devicePixelsDown / devicePixelRatio);
  canvas.width = pixelsAcross;
  canvas.height = pixelsDown;
}

function draw(canvas) {
  const ctx = canvas.getContext('2d');
  for (let x = 0; x < canvas.width; ++x) {
    let h = x % (canvas.height * 2);
    if (h > canvas.height) {
      h = 2 * canvas.height - h;
    }
    ctx.fillStyle = 'lightblue';
    ctx.fillRect(x, 0, 1, h);
    ctx.fillStyle = 'black';
    ctx.fillRect(x, h, 1, 1);
    ctx.fillStyle = 'pink';
    ctx.fillRect(x, h + 1, 1, canvas.height - h);
  }
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
/* set to red we can see the gap */
/* set to some other color to hide the gap */
  background: red; 
}

canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

<canvas></canvas>