ブラウザ上のテキストエリアの内容を画像にして表示

demo

リアルタイムで変換します。
デフォルト引数とか使っているので、新しめのChromeでないと動かないかも。

背景

テキストを画像に変換したくて、中央揃えとか色々やってみたかったので書いた。
特に難しいことはしていないが、まとめて書いておきたかったので。

テキストの描画はcanvasを使っているのだけど、そのままだとぼやけてしまう。で、canvasサイズとscaleを2倍にして、表示を1/2にする荒業をやっている。
（なので、出来上がる画像サイズは2倍だしfontsizeも2倍になっている。どうにかしたい。）