canvasの文字がぼやける・にじむ 他【HTML5】

ハマったのでメモ。

fillTextで書いた文字がにじむ

結論から言うと、ここに書いてあることをやればいい。windowsなのでRatinaディスプレイ云々は関係ないと思い込みスルーしていたのだが、windowsの設定で「全体を大きくする」を使用していたことをすっかり忘れていた。

以下、ついでにハマったことメモ。

fillTextの高さがおかしい

高さの基準がデフォルトでalphabeticになっているため、CSS感覚で指定すると何か上にずれる。textBaselineをtopに指定すれば解決する。

canvasの画像をリサイズする

上の方法でcanvasの内部解像度を大きくすると、画像にした時に環境によって画像サイズが変わってしまう。jsで新しくサイズ固定のcanvasを作成し、そこに元canvasをdrawImageするのが手っ取り早い。