캔버스 크기를 바꾸었을때 폰트설정 다시 해줘야한다

문제상황

텍스트 크기에 맞춰 캔버스 사이즈를 바꾸는 예제에서 measureText를 사용해 canvas.width를 바꿔준 후에 font에 관한 설정이 사라지는 것을 발견

  FONT_SIZE = Math.floor(innerWidth * 0.15)
  ctx.font = FONT_SIZE + 'px Creepster, cursive'
  canvas.width = ctx.measureText(TEXT).width
  canvas.height = FONT_SIZE

 

 

해결

https://stackoverflow.com/questions/65602038/cannot-set-canvas-width-and-change-font-at-the-same-time
캔버스 크기를 변경하면 컨텍스트도 재설정되기 때문에 font size에 대한 설정이 사라졌던 것이다.
캔버스 크기를 바꾸면 font에 관한 설정을 다시 해줘야한다.

  FONT_SIZE = Math.floor(innerWidth * 0.15)
  ctx.font = FONT_SIZE + 'px Creepster, cursive'
  canvas.width = ctx.measureText(TEXT).width
  canvas.height = FONT_SIZE
 
 //잃어버린 폰트크기에 대한 설정 다시 해줘야함.
  ctx.font = FONT_SIZE + 'px Creepster, cursive'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(TEXT, canvas2.width / 2, canvas2.height / 2)

 

 

 

* measureText 

CanvasRenderingContext2D.measureText() 메서드는측정된 텍스트에 대한 정보(예: 너비)가 포함된 개체를 반환한다.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let text = ctx.measureText("Hello world");
console.log(text.width); // 56;