2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

ハマったのでメモ。

fillTextで書いた文字がにじむ

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

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

fillTextの高さがおかしい

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

canvasの画像をリサイズする

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?