へっへっへ。旦那。いい画像ありますよ・・・

では画像を。線で一生懸命書くだけじゃないんですよ。
drawImageを使うのですが、用途によって引数の数が変わる謎仕様になっています。

context.drawImage(image,x,y)

ただ単純に画像をぺぺーんと描画したい場合にこいつを使ってあげましょう
範囲からはみ出した部分は自動トリミングされます。

image

ここでは、<img>要素　<canvas>要素　<video>要素のいずれかを指定します。
画像パスを指定すると思った？ざんねん！ちがいました！
なんやら使いにくそうな感じですが、画面上に無い場合はJS側でimgタグとかを生成して使ってあげましょう

x y

画像を描画する座標位置を指定してあげましょう。

var img01 = new Image();
img01.src = "/common/img/illust/63.jpg";

var canvas1 = document.getElementById('canvas01');
canvas1.width = 400;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  context1.beginPath();
  context1.drawImage(img01, 0, -140);
}

context.drawImage(image,x,y,w,h)

幅と高さを指定して描画したい場合はこれを使います。
描画する画像の幅と高さになりますので、元画像とサイズが違う場合は、拡大/縮小される形となります。

w h

イメージを描画する大きさを指定します。

var canvas2 = document.getElementById('canvas02');
canvas2.width = 400;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  context2.beginPath();
  context2.drawImage(img01, 0, 0,200,200);
}

context.drawImage(image,x,y,w,h,x2,y2,w2,y2)

画像をトリミングして好きな所に配置する場合に使用しましょう。

x y

imageで使用したい座標の各開始位置です。

w h

imageで使用したい範囲の幅と高さです。
始点：x y 終点:w hの範囲で画像がトリミングされると考えて下さい。

x2 y2

canvas側に出力する描画イメージの座標です。
上記でトリミングした画像をどこに出したいの？って指定です。

w2 h2

canvas側に出力する描画イメージのサイズ指定です。

var canvas3 = document.getElementById('canvas03');
canvas3.width = 400;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  context3.beginPath();
  context3.drawImage(img01, 170, 140,200,200,0,0,200,200);
}

注意点

画像を使用するので、プリロードを予めかけておくか何かしましょう。