Canvas 해상도에 맞게 조정하는 방법

setupCanvas(canvas) {
  const ctx = canvas.getContext("2d");

  if (window.devicePixelRatio) {
    const {
      width: hidefCanvasWidth,
      height: hidefCanvasHeight
    } = canvas.getBoundingClientRect();
    const hidefCanvasCssWidth = hidefCanvasWidth;
    const hidefCanvasCssHeight = hidefCanvasHeight;
    canvas.setAttribute(
      "width",
      hidefCanvasWidth * window.devicePixelRatio
    );
    canvas.setAttribute(
      "height",
      hidefCanvasHeight * window.devicePixelRatio
    );
    canvas.style.width = `${hidefCanvasCssWidth}px`;
    canvas.style.height = `${hidefCanvasCssHeight}px`;

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  }

  return ctx;
}

canvas 초기셋업할 때 devicePixelRatio를 가중치로 반영하면 text blurry를 해결할 수 있습니다.