Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다. 기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요. 이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다. 오늘 만난 문제가 그중 하나였는데요. 첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다. 이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지.. 그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만, 이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠. 그..

베지에 곡선(Bézier Curve) 이란 n개의 점으로부터 얻어지는 n-1차 곡선 이라고 위키피디아에 나와있습니다.딱히 그 정의가 중요한것은 아니고 우리는 이 곡선을 어떻게 그릴 것인가 가 중요합니다. 본 글에서는 html5 의 canvas 와 자바스크립트를 이용해 설명하도록 하겠습니다. 사실 html5의 canvas 나 svg 그외 많은 그래픽 라이브러리들이 베지에 곡선 그리기를 기본적으로 제공합니다.Canvas 기준으로 설명을 하면 Canvas 2D 의 컨텍스트 에는 세점을 이용하는 쿼드레틱(Quadratic Curve) 과 네 점을 이용하는 큐빅(Cubic Curve) 을 지원하는 메소드가 포함되어있습니다. 간단히 소개를 하자면 아래와 같습니다--위처럼 간단하게 세점 혹은 네점만 알면 알아서 계산..