1.2.1 2d 콘텍스트
canvas 요소는 캔버스의 너비나 높이, 또는 데이터 URL을 가져오는 것을 제외하고 canvas 요소 자체를 사용하는 것을 거의 찾아볼 수 없다.
도형과 텍스트를 그리고, 이미지를 표시 및 조작하기 위한 API를 제공하는 캔버스 콘텍스트에 대한 참조를 가져올 수 있도록 canvas 요소를 사용하는 것을 볼 수 있다.
사실 이 책의 나머지 부분에서는 2d 콘텍스트를 중점적으로 소개하고 있다.
2d 콘텍스트의 모든 속성
캔버스 자체를 참고하는 canvas 속성 외에 모든 속성은 드로잉 작업과 관련이 있다.
canvas
콘텍스트의 캔버스를 참조한다.
보통 canvas 속성은context.canvas.width와context.canvas.height등 캔버스의 너비와 높이에 접근할 때 사용한다.fillStyle
콘텍스트에서 도형을 채울 때 사용할 색상, 그라디언트, 패턴을 명시한다.font
fillText()나 strokeText()를 호출할 때 콘텍스트에서 사용할 폰트를 명시한다.globalAlpha
전역(global) Alpha 값을 설정하는 속성으로 0(완전 투명)과 1.0(완전 불투명) 사이의 값을 사용해야 한다.
브라우저에서는 이미지를 그릴 때를 포함해 globalAlpha 속성으로 그려진 모든 픽셀에 대한 alpha 값을 증가시킨다.globalComposite-Operation
브라우저가 도형 위에 다른 도형을 그리는 방법을 결정한다.
2.14절에서 사용할 수 있는 값에 대해 자세하게 설명한다.lineCap
브라우저에서 선(line)에 대한 단점(endpoint)을 그리는 방법을 명시한다.
butt, round, square 등 세 가지 값 중 하나를 명시할 수 있다.
기본값은 butt이다.lineWidth
캔버스에서 그릴 선의 너비(픽셀)를 결정한다.
반드시 음이 아닌 유한 실수 값을 사용해야 한다.
기본값은 1.0이다.lineJoin
선의 단점이 만날 때 선이 연결되는 방법을 명시한다.
bevel, round, miter 등을 값으로 사용할 수 있다.
기본값은 miter다.miterLimit
miter 값으로 선의 연결을 그리는 방법을 명시한다.
이 속성과 관련된 자세한 내용은 2.8.7절에서 소개하고 있다.shadowBlur
브라우저에서 그림자를 흐리는 방법을 결정한다.
숫자가 높을수록 그림자가 더 많이 흐려진다.
shadowBlur 값은 픽셀값이 아닌 가우시안 블러에 대한 방정식에서 사용된 값이다.
값은 반드시 양의 유한 실수 값을 사용해야 하며 기본값은 0이다.shadowColor
그림자의 색상을 정의한다.
이 속성에 대한 값은 배경이 보일 수 있도록 부분적으로 투명하게 명시할 때가 잦다.shadowOffsetX
그림자의 가로 오프셋(픽셀)을 명시한다.shadowOffsetY
그림자의 세로 오프셋(픽셀)을 명시한다.strokeStyle
패스를 그릴 때 사용한 스타일을 명시한다.
색상, 그라디언트, 패턴 중 하나를 속성값으로 사용할 수 있다.textAlign
fillText()나 strokeText()를 사용해 그린 텍스트의 가로 위치를 결정한다.textBaseline
fillText()나 strokeText()를 사용해 그린 텍스트의 세로 위치를 결정한다.
위에서 2d 콘텍스트의 모든 속성을 소개했다.
2장에서는 여기서 언급한 속성을 사례별로 알아보도록 하겠다.
2d 콘텍스트의 기능을 확장할 수 있다
각 캔버스와 관련된 콘텍스트는 강력한 그래픽 엔진으로 그라디언트, 이미지 합성, 애니메이션 등과 같은 기능을 지원하지만, 제약사항이 있다.
예를 들면, 콘텍스트에서는 점선을 그리는 작업을 지원하는 메서드가 없다.
그러나 자바스크립트는 동적 언어이므로 새로운 메서드를 추가하거나 콘텍스트에 대한 기존 메서드를 강화할 수 있다.
이와 관련된 정보는 2.8.6절(CanvasRenderingContext2D를 확장해 점선 그리기)을 참고하자