＊このページの画像は素材辞典（株式会社データクラフト）から使用しています。著作権は株式会社データクラフトにあります。

サンプル1＿画像を描画する（drawImage(image, dx, dy);）

<canvas>要素のサイズは、500×300pxです。分かりやすいようにベージュの背景にしています。
画像サイズは、280×370pxです。
このサンプル1は、<canvas>の左上（x=0, y=0 の地点）から原寸で表示しています。
キャンバスのサイズに収まらない部分は表示されずにカットされます。
（この↓場合、画像の縦が370なので、下の70pxがカットされています）

onload = function() {
    image1();
};

function image1() {	
    var cnvs = document.getElementById('canvas1');
    var ctx = cnvs.getContext('2d');
/* 新しいImageオブジェクトを生成 */
    var img = new Image();
/* 画像が読み込まれてからcanvasへ書き出す */
    img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
/* 画像URLを指定して、画像のロードを開始する */
  img.src = "img/family.jpg";
}

サンプル2＿画像をサイズ指定して描画する（drawImage(image, dx, dy, dw, dh);）

画像サイズを指定して、<canvas>のサイズ内に全体が描画するようにします。

onload = function() {
    image2();
};

function image2() {	
    var cnvs2 = document.getElementById('canvas2');
    var ctx2 = cnvs2.getContext('2d');
    var img2 = new Image();
    img2.onload = function() {
    ctx2.drawImage(img2, 0, 0, 227, 300);
  };
  img2.src = "img/family.jpg";
}

サンプル3＿画像をトリミングして描画する
（drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);）

画像をトリミングし、<canvas>の中央に描画するように指定します。

onload = function() {
    image3();
};

function image3() {	
    var cnvs3 = document.getElementById('canvas3');
    var ctx3 = cnvs3.getContext('2d');
    var img3 = new Image();
    img3.onload = function() {
    ctx3.drawImage(img3, 20, 45, 200, 270, 150, 15, 200, 270);
    };
    img3.src = "img/family.jpg";
}

サンプル4＿画像をクリッピングする（clip(); と drawImage(); ）

パスで画像をクリッピング（切り抜き）します。
切り抜き用の正円の半径は90px。<canvas>要素のサイズは、130×130pxです。

onload = function() {
    image4();
};

function image4() {	
    var cnvs4 = document.getElementById('canvas4');
    var ctx4 = cnvs4.getContext('2d');
/* 円を指定 */
    ctx4.beginPath();
    ctx4.arc(65, 65, 45, 0, Math.PI*2, false);
    ctx4.clip();
/* 画像を指定 */
    var img4 = new Image();
    img4.onload = function() {
    ctx4.drawImage(img4, 98, 187, 90, 90, 20, 20, 90, 90);
    };
    img4.src = "img/family.jpg";
}

サンプル5＿クリッピングを複数並べる

トリミングした画像の横に、クリッピングした3人の顔を並べます。
<canvas>要素のサイズは、500×270pxです。

function image5() {	
    var cnvs5 = document.getElementById('canvas5');
    var ctx5 = cnvs5.getContext('2d');
/* 画像のための onloadファンクション */
    var img5 = new Image();
    img5.onload = function() {
    /* まずトリミングした画像を描画 */
    ctx5.drawImage(img5, 20, 45, 200, 270, 0, 0, 200, 270);	
    /* 円を指定 */
    ctx5.beginPath();
    ctx5.arc(255, 135, 45, 0, Math.PI*2, false);
    ctx5.arc(350, 135, 45, 0, Math.PI*2, false);
    ctx5.arc(445, 135, 45, 0, Math.PI*2, false);
    ctx5.clip();
    /* クリッピング用の画像を描画 */
    ctx5.drawImage(img5, 37, 40, 90, 90, 210, 90, 90, 90);
    ctx5.drawImage(img5, 98, 187, 90, 90, 305, 90, 90, 90);
    ctx5.drawImage(img5, 135, 90, 90, 90, 400, 90, 90, 90);
    };
    img5.src = "img/family.jpg";
}

サンプル6＿別に作ったキャンバスを drawImage(); で描画して、クリッピングを横に並べる

drawImage(); は、img要素だけでなく、canvas要素や video要素も描画できます。
ここでは、「createElement('canvas');」で canvas を別に3つ作って、
それをHTML上の canvas に横に並べて描画しました。
JavaScript は長くなるけど、座標の計算は「サンプル5」よりもこっちのほうが分かりやすいかも。
全部を描画する<canvas>要素 ↓ のサイズは、350×130pxです。