キーボードから入力した文字をcanvasに描画する

javascript html5

http://jsdo.it/mumoshu/n318
こんなものを作ったので、html5のcanvasにjavascriptでテキストを描画するにあたって役にたった情報をまとめておきます。

canvas.getContext(name)で取得できるContextの一覧CanvasContexts - WHATWG Wiki

2dcontextの仕様
getContext('2d')で取得できるcontextの仕様.
http://dev.w3.org/html5/2dcontext/

2dcontextのtext描画まわりの仕様
http://dev.w3.org/html5/2dcontext/#text
文字種、文字サイズの設定や、描画の方法まで全てのってる。

jQueryで押下されたキーを識別する
.keypress() | jQuery API Documentation

keypressイベントをjQueryで拾って、引数に渡ってきたeventオブジェクトのwhichに押されたキーに対応する文字コードが入ってます。

文字コードをstringに変換
文字コードをstringに変換する関数がJavaScriptに標準装備されています。

jQuery#keypressと組み合わせて押されたキーに対応する文字を出力したいなら、こんな感じ。

$(document).keypress(function(event) {
  var charcode = event.which;
  console.log(String.fromCharCode(charcode));
});

グラフィックがぼけないようにcanvasのサイズを変更する

$(canvas).css('width', '800px');
$(canvas).css('height', '500px');

こんな感じで、styleでサイズ指定をするのはNG。
canvasのcontextサイズが変わらないのか、描画されたグラフィックが無理やりstyleに指定したサイズに拡大されてボケボケになります。

canvas.width = 800;
canvas.height = 500;