Canvas Context 메소드 확장하기.

Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다.

기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요.

이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다.

오늘 만난 문제가 그중 하나였는데요.

첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다.

이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 

구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지..

그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만,

이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠.

그래서 이를 해결했습니다.

그랬더니 또 새로운 문제가 튀어나왔어요.

텍스트의 너비(픽셀상 길이) 를 계산해주는 measureText 여러줄의 길이를 모두 합친 길이가 나왔어요.

사용의 경우 canvas와 javascript 를 지원하는 모든 브라우저에서 사용이 가능하고,

코드를 삽입하면 원래사용하던 이름 그대로 사용하도록 기능만 추가해보았습니다.

아래코드를 확인해보세요

---

---

위와같이 오버라이딩을 한번 해놓으면 'fillText' 는 \n 으로 줄바꿈이 가능하고, 'measureText' 는 가장 길이가 긴 줄로 길이를 리턴하게됩니다.

canvas fillText override lineBreak newline