JavaScript 시작하기 - canvas에 이미지 그리기

drawImage ( image sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

 

※ Canvas에 이미지 그리기

image  : 이미지, video , Canvas 개체

sx : 이미지 표시할 x 좌표

sy : 이미지 표시할 y 좌표

sWidth : 옵션- 이미지 width / 원본 잘라낼 영역

sHeight :  옵션- 이미지 Height / 원본 잘라낼 영역

dx : 옵션 - 잘라내 대상 이미지의 X좌표

dy : 옵션- 잘라내 대상 이미지의 Y좌표

dWidth : 옵션- 잘라내 대상 이미지의 width

dHeight : 옵션- 잘라내 대상 이미지의 Height

 

※이미지가 다 로드 된 후 호출

[예시]

const ctx = canvas1.getContext('2d');

const img1 = new Image();

img1.onload = function() {

    ctx.drawImage ( img1, 100, 10);

};

img1.src = "test.png";