Javascript/drawImage

解説 drawImage(画像, 画像の左上位置, 画像の右上位置, 画像の左下位置, 画像の右下位置, X軸配置位置, Y軸配置位置, X軸画像長さ, Y軸画像長さ);

sample1code

const SCREEN_SIZE_W = 256;
const SCREEN_SIZE_H = 224;

let can = document.getElementById("can");
let con = can.getContext("2d");

can.width = SCREEN_SIZE_W;
can.height = SCREEN_SIZE_H;

con.fillStyle = "#66aaff";
con.fillRect(0,0,SCREEN_SIZE_W,SCREEN_SIZE_H);

let chImg = new Image();
chImg.src = "sprite.png";
chImg.onload = draw;

function draw(){
    con.drawImage(chImg, 0, 0, 16, 32, 100, 10, 64, 128);
}