[Javascript] Canvas에 그려질 text의 width 값 찾기(measureText)

어쩌다 보니

canvas에서 fillRect를 사용해 text의 배경으로 들어갈 사각형의 사이즈를 text 가로 사이즈에 맞게 그려야 할 일이 생김.

css로 하는 거면 그냥 대충 width: fit-content 썼을거임.

귀찮아서 구글에 적당히 검색해봄. 이런거 할 사람이 있을지 의문이 들었는데 진짜 없었나봄.

오픈톡방에도 물어봤더니 아무도 모름. 이게 맞나 싶었지만 mdn 뒤져봄

 

mdn 선생님이 알려주신 메소드!

measureText()

 

사용 방법은 간단함.

... 생략 ...
const text = "Hello World!" // 문자열

const getWidth = canvas.measureText(text)

canvas.fillStyle = "yellow" // 사각형 채울 색상

//fillRect(좌표 x, 좌표 y, 가로, 세로)
// (x, y) 지점에 해당되는 곳부터 가로, 세로에 맞게 사각형이 그려짐

canvas.fillRect(x, y, getWidth.width, 40) // 가로 : text의 width 값, 세로 40의 속이 채워진 사각형

 

언젠가 쓰겠지 뭐....