例えば以下のように1pxの横線を描画すると、線が純粋な黒色でなく、若干ぼやけて太く見えることがある。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(20, 10);
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();

この現象は、以下の要素に起因して発生する。

• Canvasのpxが実際の画面ピクセルとは別次元で計算される
• CSS でキャンバスサイズを指定すると、実際のpxとCanvas上のpxにズレが生じることがある
• Canvas上の1pxが実画面の2pxに跨る場合、Canvasの描画計算上2px分に薄く引き伸ばされた感じに描画される

これを回避する簡単な方法は、Canvasの座標を小数点単位でずらすこと。
例えば、

ctx.moveTo(10.5, 10);
ctx.lineTo(20.5, 10);