캔버스에 그려질 수 있는 이미지의 타입들은 다음과 같다.
context.drawImage(img, dX, dY);캔버스 내에서 이미지가 그려지기 시작할 위치값을 지정한다. 그려지는 이미지의 크기는 실제 이미지 크기만큼 처리된다.
context.drawImage(img, dX, dY, dWidth, dHeight);캔버스 내에서 이미지가 그려지기 시작할 위치값과 크기를 지정한다.
context.drawImage(img, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight)캔버스 내에서 이미지가 그려지기 시작할 위치값과 크기를 지정하고 동시에 그려지는 이미지 크기 영역 내에서 실제로 이미지가 시작되는 좌측상단 위치와 가로, 세로 픽셀 수를 조정한다.
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.
캔버스 내에서 그려질 이미지의 너비를 지정한다.
캔버스 내에서 그려질 이미지의 높이를 지정한다.
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
이미지가 그려지는 위치(dX)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 x 위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.
이미지가 그려지는 위치(dY)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 y 위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.
sX 위치로부터 원래 이미지 가로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.
sY 위치로부터 원래 이미지 세로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.
캔버스 내에서 그려질 이미지의 너비를 지정한다.
캔버스 내에서 그려질 이미지의 높이를 지정한다.