【JavaScript】canvasで斜めの線を引くとぼやけてしまう

Question

canvasでstroke()を用いて斜めの線を引くと下画像のように薄い灰色のぼやけが生じてしまうのですが、これを防ぐ方法は何かないでしょうか

水平線の場合も線の幅が奇数の際にこのぼやけが生じましたが、そっちは座標を0.5ずらすことで解消できたのですが
斜め線のぼやけは座標をずらしてもアンチエイリアスを無効にしても解消できませんでした

ペイントツールによくある塗りつぶし機能を実装する上で、このぼやけのある部分は塗りつぶすことができず
下画像のようにぼやけた部分だけ浮かび上がってしまって困っています

解消する方法をご存知の方がいましたらどうか教えて頂きたいです

Answer 1

自分でも試してみましたが、確かに斜めの線を引くとアンチエリアスがかかるようですね。。

Stack Overflow に同様の質問がありました。

■ Can I turn off antialiasing on an HTML <canvas> element?
https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element

ブレゼンハムのアルゴリズムを用いて自前で描画するという方法が紹介されていました。

■ Bresenham
http://members.chello.at/easyfilter/canvas.html

＜参考＞
■ ブレゼンハムのアルゴリズム - Wikipedia
https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%8F%E3%83%A0%E3%81%AE%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0

Comments

[cx20]

あと、別の方法として「アルファ値を除去するSVGフィルタをfilterプロパティに設定する」というテクニックがあるようです。

■ canvas stroke()をした時の線の縁をぼやけさせない様にする方法について
https://ja.stackoverflow.com/questions/39927/canvas-stroke%E3%82%92%E3%81%97%E3%81%9F%E6%99%82%E3%81%AE%E7%B7%9A%E3%81%AE%E7%B8%81%E3%82%92%E3%81%BC%E3%82%84%E3%81%91%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%A7%98%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

[flandre]

回答して頂きありがとうございます！
ブレゼンハムのアルゴリズムを用いた描画というのは、「1ピクセルぶん描画するだけならアンチエイリアスがかからないので、1ピクセルのみの描画を連続して行うことでアンチエイリアスのかからない線を引く」…という解釈で合ってるでしょうか？
SVGというのものも今初めて知ったのですが、画像をこのSVGに変換してcanvasに描画すればSVGの機能を実質的にcanvasで使えるようになる、って感じなんでしょうか？とりあえず紹介して下さったSVGフィルタというのを調べて色々試してみようと思います

[cx20]

> ブレゼンハムのアルゴリズムを用いた描画というのは、「1ピクセルぶん描画するだけならアンチエイリアスがかからないので、1ピクセルのみの描画を連続して行うことでアンチエイリアスのかからない線を引く」…という解釈で合ってるでしょうか？

概ねその認識で合っているかと思います。先ほどのブレゼンハムのアルゴリズムのサンプルだとピクセルの描画に fillRect() を使っているようでした。

function setPixel(x, y) {
　context.fillStyle = 'black';
　context.fillRect(x*zoom,y*zoom,zoom,zoom);
}

サンプルコードの解説はこちらにありました。
■ The Beauty of Bresenham's Algorithm
http://members.chello.at/easyfilter/bresenham.html

[cx20]

> SVGというのものも今初めて知ったのですが、画像をこのSVGに変換してcanvasに描画すればSVGの機能を実質的にcanvasで使えるようになる、って感じなんでしょうか？

そんな感じのようですね。自分もこのあたりはあまり詳しくないです（というか先ほど知りました）
Canvas の filter プロパティがあり、ここ色々なフィルタを指定できるようになっており、
url() の形式で指定すると、SVG のフィルタ要素が適用できる、という仕組みのようです。

■ CanvasRenderingContext2D.filter
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

[flandre]

色々と丁寧に回答して頂きありがとうございます！
まだ問題の解消には至れていないのですが、教えて頂いた情報をもとに自分なりに試行錯誤してみようと思います

[cx20]

蛇足ですが、ブレゼンハムとは別のアルゴリズムで斜め線を描画するサンプルコードが Stack Overflow に投稿されていました。

https://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing/16511854#16511854

色々なやり方があるようですね。自分も勉強になります。

[flandre]

返信が遅れてしまって申し訳ありません
たくさん情報を下さってありがとうございます！