HTML5 Canvas の moveTo / lineTo でぴったり1ピクセルの水平線・垂直線を描く時、座標を 0.5 ずらさないとボヤける。
Canvas の座標系と画面上のピクセルの関係が以下のようになっているため。
たとえば水平線でこんなコードを実行すると、
context.moveTo(1, 1);
context.lineTo(10, 1);
画面上のピクセルにぴったり当てはまらないためボヤけてしまう。
次のように 0.5 ズラすと
context.moveTo(1, 1.5);
context.lineTo(10, 1.5);
ぴったり1ピクセルになる。
垂直線も同様に、以下のようになる。
