How to fix a canvas so it will look good on retina/high-DPI screens.

scale-canvas.ts

/*
  UPDATED for 2023 - Now much simpler. The old tricks are no longer needed.

  The following code makes an 800×600 canvas that is always as sharp as possible for the device.

  You still draw on it as if it's the logical size (800×600 in this case), but everything just
  looks sharper on high-DPI screens. Regular non-sharp screens are not affected.
*/

const width = 800
const height = 600
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

// 1. Multiply the canvas's width and height by the devicePixelRatio
const ratio = window.devicePixelRatio || 1
canvas.width = width * ratio
canvas.height = height * ratio

// 2. Force it to display at the original (logical) size with CSS or style attributes
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'

// 3. Scale the context so you can draw on it without considering the ratio.
ctx.scale(ratio, ratio)

最佳实践，fork 永久收藏