오늘 배운 것??

1. fillRect();

ctx.fillRect(x, y, width, height);

fillRect 메소드는 색칠된 직사각형을 만든다. x, y는 각각 좌표를 나타내고 width, height는 직사각형의 너비, 높이를 나타낸다.

2. addEventListener("contextmenu");

canvas.addEventListener("contextmenu", [함수]);

contextmenu 이벤트는 우클릭 이벤트를 말한다. 이를 이용해 커스텀을 할 수도 있는데 이는 추후에 튜토리얼을 해보자.

3. toDataURL();

const image = canvas.toDataURL("image/png");

MDN에서 설명하는 toDataURL()는 다음과 같다.

"type 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다."

한마디로 이미지에 대한 데이터를 가진 URL로 반환한다고 이해하면 될 것 같다.

function handleSaveClick(event) {
	const image = canvas.toDataURL("image/png");
	const link = document.createElement("a");
	link.href = image;
	link.download = "PaintJS[EXPORT]❤";
	link.click();
}

위의 함수를 같이 이해해보자. 이 함수는 저장 버튼을 클릭했을 때 click 이벤트로 호출되는 함수이다.

toDataURL() 메소드를 이용해 image 라는 data-URL, a 태그를 가진 link 변수를 선언하자.

그리고 link의 href attribute에는 URL이 들어가야 하므로 아까 data-URL을 가진 image를 할당해주자.

download attribute는 다운로드 시에 파일명을 지정한다.

그리고 마지막으로 이 함수는 저장버튼의 click 이벤트 발생 시 호출되는 함수이므로 a 태그인 link 를 클릭한 것 마냥 만들기 위해(클릭 시 다운로드가 되기 때문이다.) 허위 클릭(?) 이벤트를 추가해주자.

흠...

Vanilla Javascript에는 굉장히 많은 메소드, 이벤트들이 있다는 것을 애초에 알고 있었지만 까도 까도 계속 나오는 양파같다. 노마드 형님이 그랬듯이 외우지말고 이해하도록 노력하고 나중에 같은 요소를 쓰게 될 상황에서 바로 검색할 수 있도록 익숙해지자.