도형 사이즈 조정 메서드

1. ctx.scale(x, y) : 도형 크기 확대/축소

   캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가)

2. ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0)

3. ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심

4. ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)

   • scale(), rotate(), translate() 일괄 적용하는 메서드

   • 이전 변형 결과 값에 이어서 수행

   • 초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)을 3번 수행하고 Matrix 정보를 확인해보면 아래와 같다. 이전에 수행한 Matrix 결과 값에 이어서 transform()이 적용되기 때문

     console.log(ctx.getTransform());
     // 출력 결과: 1.72, 0, 0, 1.72, -90, -90
     
     // scaleX 변화 과정: 1 * 1.2 * 1.2 * 1.2 = 1.72
     // scaleY 변화 과정: 1 * 1.2 * 1.2 * 1.2 = 1.72
     // translateX 변화 과정: 0 - 30 - 30 - 30 = -90
     // translateY 변화 과정: 0 - 30 - 30 - 30 = -90
     

5. ctx.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

   • 이전 설정값을 무시하고 transform() 실행
   • transform(1, 0, 0, 1, 0, 0)인 상태에서 transform() 실행하는 것과 동일

6. ctx.getTransform() : 현재 Matrix 정보 조회

   console.log(ctx.getTransform());
   // DOMMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, ...}
   

7. ctx.resetTransform() : 현재 Matrix 정보 초기화

   console.log(ctx.getTransform()); // 1.2, 0, 0, 1.2, -64, -87, ...
   ctx.resetTransform(); // 혹은 ctx.setTransform(1, 0, 0, 1, 0, 0)
   console.log(ctx.getTransform()); // 1, 0, 0, 1, 0, 0
   

scale() 실행 후 원점 조정

캔버스에서 scale(2, 2)를 적용하면 모든 그래픽 요소(도형)의 크기가 2배로 늘어나므로, scale() 적용 전 캔버스 중앙에 그렸던 도형은 아래처럼 가장자리만 보인다.

참고로 scale() 수행시 실제 캔버스의 물리적 크기가 늘어나는 것은 아니지만(논리적 확대) 설명의 편의를 위해 캔버스 크기가 증가한 것처럼 설명했다.

늘어난 캔버스 크기(width, height)의 절반만큼 원점을 이동시키면 캔버스가 스크린 가운데 보이도록 조정할 수 있다.

• 원래 캔버스 크기가 width 600, height 400 이라고 가정
• scale(2, 2) 후 캔버스 크기는 width 1200, height 800
• 확대 전/후 캔버스 크기 차이는 width 600, height 400