外部画像を読込んで表示するの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var img = new Image();
img.src = 'images/example.png';
img.onload = function () {
    context.drawImage(img,0,0);
}

Image instance imgを作成
img srcプロパティに画像パスを設定
画像のonload後にCanvasへ描画

drawImage
Image instance:Image, x position:int, y position:int

＊drawImageの引数はなんかめんどくさい
http://www.w3.org/TR/2010/WD-2dcontext-20100624/#images

context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

引数の数でできることが変わる、Cのオーバーロード（だったっけ）みたいなんかなぁ。
表示をクロップさせたり、スケールさせたりできるみたい。

Note: This specification does not define the algorithm to use when scaling the image, if necessary.

でもこんな注意書きがあるから画質の保証は無いらしい。
スケールは避けた方が良さげかな。