HTML5의 <canvas> 태그는 자바스크립트 같은 스크립트 언어를 이용해 그래픽, 애니메이션, 차트 등을 자유롭게 그릴 수 있게 해주는 요소입니다. HTML5에서 새롭게 도입된 태그로, 웹 페이지 안에서 동적인 비주얼 콘텐츠를 구현할 때 널리 활용됩니다.
캔버스에 이미지 그리기: drawImage() 메서드
HTML5 캔버스 위에 이미지를 표시하려면 drawImage() 메서드를 사용합니다. 이 메서드는 지정한 이미지 객체나 다른 캔버스 객체를 받아, 현재 캔버스 위에 그려줍니다.
drawImage() 메서드의 기본 문법은 다음과 같습니다.
ctx.drawImage(image, x, y);
- image: 화면에 그릴 이미지 객체 또는 캔버스 객체
- x, y: 대상 캔버스에서 이미지가 배치될 좌표 (왼쪽 상단 기준)
다양한 매개변수 조합
drawImage()는 필요에 따라 여러 형태로 호출할 수 있습니다.
drawImage(img, dx, dy)– 원본 크기 그대로 지정 위치에 그리기drawImage(img, dx, dy, dWidth, dHeight)– 크기를 조절하여 그리기drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)– 원본 이미지의 일부 영역을 잘라내어 그리기
예제 코드
아래 예제는 캔버스에 배경 이미지를 불러온 뒤, 그 위에 선을 그리는 방법을 보여줍니다. 이미지 로딩이 완료된 후에 그리기 작업을 수행하도록 onload 이벤트를 활용하는 점에 주목하세요.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape() {
// DOM으로 캔버스 요소 가져오기
var canvas = document.getElementById('mycanvas');
// 캔버스 미지원 브라우저에서 실행되지 않도록 확인
if (canvas.getContext) {
// getContext로 2D 드로잉 컨텍스트 사용
var ctx = canvas.getContext('2d');
// 이미지 생성 및 그리기
var img = new Image();
img.src = '/images/backdrop.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.moveTo(30, 96);
ctx.lineTo(70, 66);
ctx.lineTo(103, 76);
ctx.lineTo(170, 15);
ctx.stroke();
}
} else {
alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>실행 결과 및 핵심 포인트
위 코드를 실행하면 캔버스 좌측 상단(0, 0)에 backdrop.jpg 이미지가 그려지고, 그 위에 지정된 좌표를 잇는 꺾은선이 추가로 표시됩니다.
이미지를 캔버스에 그릴 때는 반드시 이미지 로딩이 완료된 후 drawImage()를 호출해야 합니다. 이미지가 완전히 로드되기 전에 그리기를 시도하면 아무것도 표시되지 않으므로, 위 예제처럼 img.onload 콜백 함수 안에서 그리기 작업을 처리하는 것이 안전합니다.