HTML5의 drawImage() 메서드를 사용하면 캔버스(Canvas) 위에 이미지를 손쉽게 그릴 수 있습니다. 이 메서드는 이미지 객체뿐만 아니라 다른 캔버스나 비디오 프레임도 함께 그릴 수 있어 활용도가 매우 높습니다.
기본 사용 예제
아래 예제는 이미지를 캔버스에 로드한 뒤, 그 위에 선을 추가로 그리는 방법을 보여줍니다. 이미지가 완전히 로드된 후에 그리기 작업을 수행하도록 onload 이벤트를 사용하는 것이 핵심입니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
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>drawImage() 메서드의 매개변수
drawImage() 메서드는 전달하는 인자의 개수에 따라 세 가지 방식으로 사용할 수 있습니다.
1. 기본 형태 (인자 3개)
ctx.drawImage(img, x, y) — 이미지를 지정한 좌표(x, y)에 원본 크기 그대로 그립니다.
2. 크기 조절 (인자 5개)
ctx.drawImage(img, x, y, width, height) — 이미지를 지정한 좌표에 그리면서 너비와 높이를 조절해 크기를 변경할 수 있습니다.
3. 잘라내기 (인자 9개)
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height) — 원본 이미지의 특정 영역(sx, sy부터 swidth × sheight 크기)을 잘라내어 캔버스의 원하는 위치와 크기로 그릴 수 있습니다.
주의 사항
이미지가 아직 로드되지 않은 상태에서 drawImage()를 호출하면 아무것도 그려지지 않거나 오류가 발생할 수 있습니다. 반드시 위 예제처럼 img.onload 이벤트 핸들러 안에서 그리기 작업을 수행하는 것이 좋습니다. 또한 외부 도메인의 이미지를 사용할 경우 CORS 정책에 따라 캔버스 오염(tainted canvas) 문제가 발생할 수 있으므로, 필요 시 crossOrigin 속성을 설정해야 합니다.