[Canvas] Image

html에서 Img를 가져오는 게 아니라, JS에서 Img 객체를 생성하는 것

const imgElm = document.createElement('img'); 
const imgElm = new Image(); // 똑같음
imgElm.src = './images/tomato.png';

이미지는 외부 데이터이므로, 로딩시간이 필요함. 로드 끝나면 그리기 시작

cf) image 는 load, 비디오는 canplaythrough

mgElm.addEventListener('load', () => {
  // context.drawImage(imgElm, 50, 50) // 위치만 지정할시
  context.drawImage(imgElm, 50, 50, 100, 100); // 이미지 크기 설정 가능
});

// MDN 

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// 3번: 특정 부분만 크롭해서 그리기