색상

fillStyle API를 통해서, rgb(빨, 녹, 파), rgba(빨, 녹, 파, 알파[투명]), 또는 색이름(예: red, blue, black...)을 이용하여 색을 지정 할 수 있습니다. 문자열("...")로 입력해야함에 주의합니다. 색상 설정과 관련하여 대소문자를 구분하지 않습니다.

'rag(0~255, 0~255, 0~255)'
'raga(0~255, 0~255, 0~255, 0.0~1.0)'
'red', 'blue', 'black', 'green' ... * 참조 : 색상표
'#FFFFFF' or '#FFF'
'#AA223344' or '#A234'

// 왼쪽 알록달록 박스
for (var i = 0; i < 6; i++) {
  for (var j = 0; j < 6; j++) {
    ctx.fillStyle = `RGB(${255 - 51 * i}, ${255 - 51 * j}, 0)`;
    ctx.fillRect(j * 25, i * 25, 25, 25);
  }
}

// 가운데 원
ctx.arc(225, 75, 75, 0, Math.PI * 2);
ctx.fillStyle = 'cadetblue';
ctx.fill();

// 오른쪽 반투명 빨강박스
ctx.fillStyle = '#FF000077';
ctx.fillRect(250, 0, 150, 150);

Stroke 예제

아래 예시는 그라데이션(Gradation, 서서히 적용되는)이 아닙니다. 하나의 원은 단일색으로 칠해졌습니다.

for (var i = 0; i < 6; i++) {
  for (var j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(0, ${255 - 51 * i}, ${255 - 51 * j})`;
    ctx.beginPath();
    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
    ctx.stroke();
  }
}

투명도

노, 녹, 파, 빨 4개의 배경색을 칠 한 후에 중앙에 크기가 다른 투명도20%인 원을 반복해서 칠함으로써, 중앙쪽으로 밝아지는 효과를 주고 있습니다.

// 배경을 그린다
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);

// 반투명한 사각형을 그린다
for (var i=0;i<10;i++){
  ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
  for (var j=0;j<4;j++){
    ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
  }
}

그라데이션gradient

fillStyle 또는 strokeStyle에게 Color객체 대신 Gradient객체를 생성해서 전달해 주면됩니다. Gradient객체에게 시작점과 끝점을 지정한 뒤에, 해당 두 점을 기준으로 0 ~ 1 사이에 색을 지정해주면 알아서 색칠해 줍니다. 다만, 스크래치 기법(초등학교에서 크래파스로 색칠한 뒤에 검정색을 덧칠하고 송곳이나 칼로 긁어서 그리는 기법)과 같이 상대 위치로 그라데이션을 하지 않고, 절대 위치로 그라데이션을 결정하기 때문에, 시작점과 끝점이 고정임을 유의하십시오.

createLinearGradient(시작x, 시작y, 끝x, 끝y);
addColorStop(0 ~ 1 사이 소수, 색);

// 좌상단
var lngrad = ctx.createLinearGradient(0, 0, 0, 100);
lngrad.addColorStop(0, '#FFF');
lngrad.addColorStop(1, '#000');

ctx.fillStyle = lngrad;
ctx.fillRect(0, 0, 100, 100);
drawArrow(ctx, 50, 10, 50, 90);

RadialGradient

createRadialGradient(시작x, 시작y, 시작반지름, 끝x, 끝y, 끝반지름);

// 가운데 녹색
var radgrad = ctx.createRadialGradient(45, 45, 11, 52, 50, 25);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, '#019F6200'); // 뿌옇게 보이는 이유

빨간 점(시작 점)과 파란 점(끝 점)은 이해를 돕기 위한 가이드라인입니다. "시작 반지름"이 클수록 빨간점을 중심으로하는 반경이 커지고, 예제에서는 빛을 받는 부분의 크기가 커집니다. "시작 반지름"이 "끝 반지름"을 넘어지 않도록 주의하십시오. 그렇지않으면 원하지 않는 모양(고깔 모양)으로 출력될 것입니다. 끝 반지름은 전체 원의 크기를 보여줍니다. 예제는 뒤에 있는 그림부터 그립니다. Stop point에서 알파_alpha(투명도)를 0으로 했기 때문에 뒤에 원이 지워지지 않고 그려지고 있습니다.

패턴

원본 이미지는 배경색이 없는 이미지 입니다(140 x 120). 캔버스는 500 x 300 입니다. 예제 이미지 경로에 유의하세요.

원본이미지 예제파일 예제이미지

위 예제에서 사용된 원본이미지의 크기는 100x100이상입니다(백터파일이기 때문에 viewbox를 기준으로..). 패턴을 사용하기 위해서 이미지 크기를 줄이기 위해서 canvasImage에 그림을 로딩한 후에 사이즈를 50x50으로 수정하였고, 다시 canvas에 패턴으로 채우는 예제입니다.

효과

그림자

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#0007";

ctx.font = "30px 궁서체";
ctx.fillStyle = "Black";
ctx.fillText("그림자 예제", 5, 30);   // 글자 출력

ctx.strokeRect(50, 50, 90, 20); // 빈박스

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = "#F00A";  // 붉은 색 그림자
ctx.fillRect(50, 80, 90, 20);   // 검정 박스

filter

CSS의 필터기능을 사용할 수 있습니다.

ctx.filter = "drop-shadow(3px 3px 3px black)";
ctx.fillText("그림자 예제(shadow)", 50, 100);  

채우기 규칙

fill()
fill(경로)
fill(규칙)
fill(경로, 규칙)

규칙은 nonzero(=default)와 evenodd가 있으며, nonzero는 모든영역, evenodd는 홀수번 겹친영역을 선택합니다.

svg 예제

※ lineTo와 polygon은 같습니다. (좌) non-zero, (우) even-odd

<svg height="210" width="200"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#ffff00;stroke:#331B3F;stroke-width:3;fill-rule:nonzero;"/>
</svg>
<svg height="210" width="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#ffff00;stroke:#331B3F;stroke-width:3;fill-rule:evenodd;"/>
</svg>