HTML5 Canvasで描いた線がぼやけて見えるときの原因と解決法

HTML5のCanvasに線を描画したとき、輪郭がにじんでぼやけて見えることがあります。これはCanvasの仕様に起因するもので、適切な対策を施せば鮮明な線を描けるようになります。本記事では、ぼやけの主な原因と具体的な解決方法をわかりやすく解説します。

線がぼやける原因

Canvasでは、指定した座標がピクセルとピクセルの「境界」上にある場合、アンチエイリアス処理によって線が隣接する2つのピクセルにまたがって描画されます。その結果、本来シャープであるべき1pxの線が半分ずつに分かれ、薄くにじんで見えてしまうのです。

解決策1：座標を0.5pxずらしてピクセルに重ねる

ぼやけを解消するには、線の座標をピクセルの中心に合わせます。具体的には、座標値に0.5を加えることで、線が1つのピクセル内にきれいに収まるように調整します。

context.moveTo(20.5, 0);
context.lineTo(20.5, 50);

このようにx座標を「20.5」と指定することで、縦線がピクセル境界をまたがらず、くっきりとした1pxの線として描画されます。

解決策2：キャンバスのサイズ設定を見直す

もう一つの原因として、canvas要素のwidth・height属性（内部解像度）と、CSSで指定する表示サイズが一致していないケースが挙げられます。内部解像度と表示サイズが異なると、描画内容が拡大・縮小され、輪郭がにじむ原因になります。

まず、属性を使ってキャンバスの内部解像度を設定します。

canvas1 = document.getElementById('canvas');
canvas1.width = 250;
canvas1.height = 250;

次に、CSS側で実際の表示サイズを指定します。

canvas1.style.width = "100px";
canvas1.style.height = "100px";

この例では内部解像度を250×250に設定し、表示サイズを100×100へ縮小しています。高解像度の描画面を縮小して表示すれば、より精細な描画結果が得られます。逆に、低い解像度のまま拡大表示するとぼやけが目立ちやすくなるため注意しましょう。

まとめ

Canvasの線がぼやけるときは、①線の座標を0.5px単位で調整してピクセルに重ねる、②width・height属性とCSSの表示サイズの関係を正しく理解して設定する——この2つのポイントを押さえることで、鮮明な描画を実現できます。