英語だけど、まとまっています。
http://www.w3schools.com/html5/html5_ref_canvas.asp
http://ameblo.jp/principia-ca/entry-11033734709.html
あらかじめ画像を読み込んでからでないと、何も描画されない。 画像の読み込みは非同期っぽい。
画像の読み込みはonloadイベントが帰ってくるので、そこに継続したい処理を記述することで、同期処理の代用コードが書ける。
だから、画面読み込み時のready状態になる際のイベントで、画像を読み込ませる処理を書けばよいのだが、おそらく配列にまとめていれるコードを書くことになるだろう。
その際に問題なのは、そのイメージオブジェクトを描画でつかい終わったら、参照を解放してやらないと、GCが働かないらしいのだ。
これらの、点に注意してコードを書く必要がある。
私がまとめたわけではありませんが、まとめてくださっていたので、リンクしました。
ミニゲームの紹介のリンクなどがあります。 http://www.html5-memo.com/canvas/site/