タイピングゲームのたまご(canvas)

こんなものを作ったので、html5のcanvasを使ってタイピングゲーム的なものを作るのに役立った情報をまとめておきます。

テキストの描画の基本や入力されたキーの取得などはここでは触れないので、こちらを参照してください。
キーボードから入力した文字をcanvasに描画する - mumoshu.log

文字色を変える
context.fillText(text, x, y)でテキストを描画する場合は、context.fillStyleに色を設定する。
色はcssのcolorプロパティと同じ書式して指定する。
灰色にするならこんな感じ。

guideWriter.context.fillStyle = "#aaaaaa";

キャンバスをクリアする
透明で塗りつぶす。表現がアレですが。ペイントソフトの消しゴムみたいなものです。
白で塗りつぶすのではなく、何も色がぬられていない状態に戻すということ。

canvasの描画領域全体を塗りつぶす場合は以下のようなコードにします。
描画領域には、style指定するようなmarginやpadding部分は含まれません。
jQueryを使う場合は、jQuery(canvas).width(), height()したときのサイズが描画領域です。

var worldContext = worldCanvas.getContext('2d');

worldContext.clearRect(0, 0, worldCanvas.width, worldCanvas.height);

他のキャンバスの内容を別のキャンバスに描画

context.drawImage(canvas, x, y)でできます。
引数は描画するcontextでは無く、canvasであることに注意。
2dcontextではない、別種のcontextで描画された内容もdrawImageできるようにこうなってるのかな。

worldContext.drawImage(guideCanvas, 0, 0);