캔버스(Canvas)는 HTML 페이지 위에 존재하는 하나의 사각형 영역입니다. 이 영역 안에서는 JavaScript를 활용해 다양한 그래픽을 자유롭게 그릴 수 있습니다.
캔버스 생성하기
HTML5에서는 다음과 같이 간단하게 캔버스 요소를 만들 수 있습니다.
<canvas id="canvas1" width="250" height="150"></canvas>
위 코드는 너비 250px, 높이 150px 크기의 빈 캔버스를 'canvas1'이라는 이름으로 생성합니다.
JavaScript로 그래픽 그리기
생성된 캔버스에 실제로 그래픽을 그리려면 JavaScript의 컨텍스트(context) 객체를 사용해야 합니다.
var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0, 0);
ctx1.lineTo(300, 200);
ctx1.stroke(); // 컨텍스트 객체의 설정에 따라 실제 선을 화면에 그립니다moveTo()와 lineTo()로 경로를 지정한 뒤 stroke() 메서드를 호출하면 지정된 좌표 사이에 선이 그려집니다.
캔버스 데이터를 파일로 저장하기
그린 그래픽을 파일 형태로 저장하려면 캔버스 내용을 데이터 URL(data URL) 형식으로 변환해야 합니다. PNG나 JPG 같은 이미지 형식으로 변환할 수 있으며, 이때 사용하는 메서드가 바로 toDataURL()입니다.
var imgurl = canvas.toDataURL(); // 캔버스 내용을 PNG 형식의 데이터 URL로 변환
document.getElementById('cimg').src = imgurl; // img 태그의 src 속성에 데이터 URL을 할당하여 이미지로 표시·저장
toDataURL() 메서드는 기본적으로 PNG 형식으로 변환합니다. 만약 JPG 형식으로 저장하고 싶다면 canvas.toDataURL("image/jpeg")처럼 원하는 MIME 타입을 인자로 전달하면 됩니다.
이렇게 변환된 데이터 URL은 <img> 태그의 src 속성에 바로 적용할 수 있으며, 사용자는 해당 이미지를 우클릭하여 로컬 파일로 저장하거나, 서버로 전송해 영구 보관할 수도 있습니다.
정리
지금까지 살펴본 과정을 요약하면 다음과 같습니다.
- <canvas> 태그로 캔버스 영역을 생성합니다.
- getContext("2d")로 2D 드로잉 컨텍스트를 얻어 그래픽을 그립니다.
- toDataURL() 메서드로 캔버스 내용을 이미지 데이터 URL로 변환합니다.
- 변환된 URL을 <img> 태그에 연결하거나 다운로드 링크로 제공하여 파일로 저장합니다.
이러한 방법을 활용하면 HTML5 캔버스에 그린 그래픽을 손쉽게 이미지 파일로 저장할 수 있습니다.