这是画布令人烦恼和困惑的事情之一。你需要做的是使用devicePixelRatio来调整画布的大小。这将增加画布的实际大小，以匹配设备的像素密度。这可能是2，或1.5等...视网膜屏幕通常是2。
对于绘制图像，明智的方法是支持任何图像大小，并将其放入画布区域（通常是缩小）。* 对于一个很小的图像，此代码将放大并丢失分辨率。*

const IMAGE_URL = 'https://unsplash.it/1920/1080';

const canvas = document.createElement('canvas');
const _canvasContext = canvas.getContext('2d');

// you will probably want this, unless you want to support many screen sizes in which case you will actually want the window size:
/*
const width = 1180;
const height = 820;
*/

const width = window.innerWidth
const height = window.innerHeight

const ratio = window.devicePixelRatio;
// size the canvas to use pixel ratio
canvas.width = Math.round(width * ratio);
canvas.height = Math.round(height * ratio);

// downsize the canvas with css - making it
// retina compatible
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

document.body.appendChild(canvas);
_canvasContext.fillStyle = 'gray'
_canvasContext.fillRect(0, 0, canvas.width, canvas.height);

function drawImage(url) {
  const img = new Image()
  img.addEventListener('load', () => {

    // find a good scale value to fit the image
    // on the canvas
    const scale = Math.min(
      canvas.width / img.width,
      canvas.height / img.height
    );

    // calculate image size and padding
    const scaledWidth = img.width * scale;
    const scaledHeight = img.height * scale;
    const padX = scaledWidth < canvas.width ? canvas.width - scaledWidth : 0;
    const padY = scaledHeight < canvas.height ? canvas.height - scaledHeight : 0;

    _canvasContext.drawImage(img, padX / 2, padY / 2, scaledWidth, scaledHeight);
  })
  img.src = url;
}

drawImage(IMAGE_URL);

body,html {
  margin: 0;
  padding: 0;
}

正如代码片段中的注解所提到的，如果你想让你的画布总是使用1180x820 ...一定要修改width和height变量：

const width = 1180;
  const height = 820;

出于代码片段的目的，我使用了窗口大小。如果您希望支持其他设备大小，这可能更适合您。