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

남양주개발자

·

2019. 7. 26. 17:33

728x90
반응형
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를 해결할 수 있습니다.

728x90
반응형
그리드형

이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다