DOM Canvas CanvasRenderingContext2D Context 속성

 설명 

 strokeStyle

 선의 테두리에 사용하는 색상이나 스타일을 정의한다.

 fillStyle

 globalAlpha

 투명도 설정

기본값은 1.0(완전 불투명)이고 0부터 1사이의 값을 가질 수 있다.

 lineWidth

 선의 두께를 지정한다. ( 기본값 1.0 )

 lineCap

 컨택스트에 그린 선의 끝 모양을 말한다. 

속성값

butt : 수직으로 꺽인 납작한 끝 모양 ( 기본값 )

round : 반원 모양이며 선의 두께가 지름이다.

square : 길이는 선 두께와 같고 폭은 선 두께의 반인 직사각형을 수직으로 꺽인 납작한 선 끝에 놓은 모양이다.

 lineJoin

두 선이 만나는 모서리의 모양을 처리한다.

join은 두 선이 만나는 모서리를 의미한다.

속성값

miter : 조인에 뽀족한 가장자리를 그린다 ( 기본값 )

bevel : 조인에 대각선 가장자리를 그린다.

round : 조인에 둥근 가장자리를 그린다.

 miterLimit

 shadowOffsetX

 shadowOffsetY

 shadowBlur

 shadowColor

 globalCompositeOperation

 그림이 겹친 상태일 때 캔버스에 이미 그려진 그림(밑그림)과 그리려는 그림(윗그림)간의 출력 관계를 설정한다.

속성값

copy : 밑 그림을 윗그림으로 덮어버린다.

destination-atop : 겹친 부분은 밑그림을 출력하고 겹치치 않은 부분은 윗그림을 출력한다.

destination-in : 겹친 부분만 밑 그림을 출력한다. 

destination-out : 겹치지 않은 밑그림만 출력한다.

destination-over : 밑 그림을 윗그림보다 위에 그린다.

lighter : 윗 그림과 밑그림을 합친다.

source-atop : 윗 그림은 겹친 부분만 출력한다.

source-in : 겹친 부분만 윗그림을 출력한다.

source-out : 겹치지 않은 부분에서 윗그림만 출력한다.

source-over : 윗 그림을 밑 그림보다 위에 그린다 ( 기본값 )

xor : 윗 그림과 밑 그림을 xor 한 것이다.

 font

 textAlign

 textBaseline