HTML <canvas> rect() 함수 - 직사각형 그리기

1. rect()

rect() 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.

 

rect(x, y, width, height);

 

좌측상단이 (x, y)이고 폭과 높이가 width 와 height 인 직사각형을 그립니다.

 

이 메소드가 실행되기 전에 (x, y) 매개변수를 가진 moveTo() 메소드가 자동으로 호출됩니다.

즉, 현재의 펜 위치가 자동으로 기본 좌표로 초기화 됩니다.

 

 

2. 예제

function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.rect(25, 25, 300, 300);
        ctx.stroke();
      }
    }

 

결과 화면

 

 

 

 

**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial