fill 메서드

fill 메서드는 lineTo, rect, arc 등의 메서드를 통해 그린 도형을 채웁니다.

구문

javascriptcontext.fill();

예시

사각형을 그리고 fill로 채워 봅시다:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.fill();

Результат:

같이 보기

  • 채우기 색상을 설정하는 속성 fillStyle
  • 윤곽선을 만드는 메서드 stroke