[책] 자바스크립트 코드 레시피 278 - 188일차

캔버스에 이미지 붙여넣기

• 외부의 이미지를 캔버스에 표시하고 싶을 때

구문

context.drawlmage(image, x, y); // 캔버스 요소에 이미지 그리기

설명

Image 객체와 drawlmage()를 사용해 캔버스 요소에 이미지를 표시합니다. Image 객체의 로딩이 완료되지 않으면 캔버스에 이미지를 그릴 수 없으므로 onload를 사용해 미리 로딩 작업을 처리합니다. drawlmage()의 두 번째와 세 번째 인수는 좌표 위치를 전달합니다.

index.html

<canvas id="my-canvas" width="100" height="100"></canvas>

---

script.js

const canvas = document.querySelector('#my-canvas');
const context = canvas.getContext('2d');
const img = new Image(); // Image 인스턴스 생성
img.onload = () => { // 이미지 로딩 후 처리
  context.drawImage(img, 10, 10); // 콘텍스트로 캔버스에 그리기
}
img.src = 'sample.jpg'; // 이미지 로딩 시작
canvas.style.border = '1px solid #000';