브라우저는 2차원 좌표시스템을 따르고 있고, DOM에서 지원하는 Canvas 객체를 이용해 점, 선, 도형, 텍스트, 이미지 등을 조작할 수 있다.
좌표 시스템
좌표 시스템 원점은 좌측상단인 (0, 0) 좌표이고, 모든 요소(도형)는 원점을 기준으로 위치하게 된다.
Context란 무엇인가
Context는 화면에 렌더링될 대상으로 실행환경을 지원한다. Context 객체는 Canvas Elements에서 지원하며, 각 Context 마다 다른 상태를 가지고 있다. 도화지와 유사하게 생각할 수 있다. 또한, Canvas 는 2차원 시스템 외에 WebGL이라는 3D API도 지원한다.
HTMLCanvasElement.getContext()
열린, 닫힌 Path
각 Path는 지나간 흔적으로 볼 수 있고, 열린 경로, 닫힌 경로가 존재할 수 있다. 만약 위 그림과 같이, 닫힌 경로를 fill() 하게 되면 연결된 외부 공간까지 동일한 Style이 적용된다. 열린 경로는 외부 공간과 분리되어 내부 공간만 style이 적용된다. 따라서 Path 이용할 때는 열린 경로인지 닫힌 경로인지 확인이 필요하다.
Canvas API
Canvas Context는 각 도형에 color, gradient, pattern Style을 지원하기 위해, fillStyle, strokeStyle, shadowColor 등의 Property를 가지고 있다. 따라서 Context는 Drawing 시점 기준으로 Property Style을 도형에 적용한다.
Rectangles
- fillRect(fromX, fromY, toX, toY) : 지정한 좌표를 기준으로 직사각형을 그린다. 이때, fillStyle Property 속성이 적용된다.
Paths
-
beginPath() : Context가 각 Path을 저장할 것을 요청한다. 이후에 fill(), stroke() 함수가 호출하며 Context에 기록된 Path를 한꺼번에 그린다.
-
closePath() : 현재 좌표에서 시작 좌표까지의 Path를 생성한다.
-
moveTo(x, y) : Line 생성없이, 현재 Context의 Path 좌표를 (x, y)로 이동시킨다.
-
arc(x, y, radius, start angle, ending angle, 시계 or 반시계 방향) : x, y 중심으로 radius 만큼 떨어진 공간인 start 부터 end angle까지 경로를 그린다. 주로 Circle, 부채꼴을 그리기위해 사용한다.
-
stroke() : Context에 기록된 Path를 실제로 화면에 그린다. 내부적으로는 moveTo()와 lineTo() 함수로 구현되고, strokeStyle Property 속성이 적용된다.
-
fill() : Context에 기록된 Path를 실제로 화면에 그린다. stroke()와 다르게 fillStyle Property 속성이 적용된다. 만약 열린 경로라면, Path 시작점과 끝점을 이어 닫힌 경로로 만들고 나서 내부 공간을 fillStyle Property 속성으로 적용한다.
Transformations
Transformations을 적용하게 되면, Context에 지속적으로 남아 다음 Path에도 영향을 미친다. 따라서 Transformations 사용하기 이전에 save()하고 이후에 restore()하는 것이 안전하다.
-
rotate(angle) : 현재 도형을 angle만큼 회전시킨다.
-
translate(x, y) : 기준 좌표를 (x, y)로 변경한다. defatult는 (0, 0) 이다.
Text
-
fillText(text, x, y, maxWidth) : 원하는 text를 도형 내부에 채운다. fillStyle property 속성이 적용된다.
-
strokeText(text, x, y, maxWidth) : 원하는 text를 도형에 그린다. strokeStyle property 속성이 적용된다.
Image Drawing
- drawImage(resource, source start x, source start y, source width, source height, target x, target y, target width, target height) : image, canvas, video를 canvas로 그린다. Target Resource 전체를 그리는 것이 아니라, 지정한 부분만 그린다. 따라서 Resource 원본 비율을 유지할 수 있다. 또한 반드시 Target Resource가 모두 load 된 후, drawImage() 함수를 호출해야 한다.
Other
-
save() : 현재 Context 상태를 저장한다.
-
restore() : 이전에 Context에 저장된 Path 상태와 Property 속성을 복구한다.
-
createPNGStream() : Drawing된 Canvas를 PNG Stream으로 만들어주며 파일 저장이 가능하다.
const fs = require('fs');
const out = fs.createWriteStream('./canvas.png');
canvas.createPNGStream().on('data', function (chunk) {
out.write(chunk);
});or
const fs = require('fs');
const out = fs.createWriteStream('./canvas.png');
const stream = canvas.createPNGStream();
stream.pipe(out);참고
WordPress 만든 Automattic 에서 Node-Canvas를 지원한다.
