Canvas 이미지 사용하기

context의 drawImage를 이용하여 캔버스 위에 이미지를 입힐 수 있습니다.

 

(https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

s는 source의 약자입니다. 이미지 내부 크기, 위치를 의미합니다.

d는 destination이라네요.

 

const canvas = document.querySelector(".canvas");
const context = canvas.getContext("2d");

const imgElem = document.createElement("img");
imgElem.src = "../images/ilbuni1.png";

// img 태그가 로드된 후에 그려야 합니다
imgElem.addEventListener("load", () => {
  context.drawImage(imgElem, 50, 50);
});