Konva.js でどうしても文字がにじんで見える時は

Konva.js の Text で文字を書き出しているのだが、どうしても文字がにじんで見えて気になって仕方ない…

「Canvas 文字ぼやける」で調べると Window.devicePixelRatio を使って Canvas の内部的なサイズを見た目のサイズより数倍にすれば良さそうだと知った。

Konva.js で考慮されてそうなもんだけどな、と思い調べると、pixelRatio という設定があり、環境に合わせて自動設定してくれている様子。

そういえば Mac で見るとそんなに気にならなかったのだが、Windows で見たときに特に気になった。Mac は Retina ディスプレイを考慮して pixelRatio が 2 になっているのかもしれない。

ダメ元で手動で 2 に変えて Windows で確認したところ、ビンゴ！だいぶクリアになった。

Vue.js で vue-konva として使っているため、v-stage タグを配置しているコンポーネントの script 冒頭に下記を追加した。

import Konva from 'konva';
Konva.pixelRatio = 2;

ちなみにはじめは v-stage の height と width を2倍にして scale: { x: 2, y: 2} を指定し、CSS では元のサイズを指定してみて試したのだが、mouse イベントや drag イベントの座標がズレてしまってだめだった。簡単な解決方法があって、よかった〜