4

javascriptを使用しcanvasでペイントツールを作成しています。

このとき stroke()関数を使って太い線を引いた時に、縁が実際に指定したRGBとは違う値が出てきてしまいます。
アンチエイリアス処理が働いている様ですが、これをやらない方法はあるのでしょうか?
コンテキストのアンチエイリアス処理はOFFにしてありますがそれでもなってしまいます。

 ctx.beginPath();
 ctx.lineWidth = 10;
 ctx.moveTo(startX, startY);
 ctx.lineTo(endX, endY);
 ctx.stroke();

この様な処理で線を書いています。
startとendはマウスイベントで取得しています。

この時こうなってしまいます。
ぼやけてしまう画像

こうなってほしいです。(ペイントで少し修正しました。)
修正した画像

どなたか分かる方ご教授お願いします。

2 件の回答 2

2

以前本家のstackoverflowにて全く同じ質問がありました.

Overcoming antialiasing on canvas lines for mouse event
https://stackoverflow.com/questions/46839876/overcoming-antialiasing-on-canvas-lines-for-mouse-event/46840699#46840699

FireFoxであればアルファ値を除去するSVGフィルタをfilterプロパティに設定するだけ済みます.

const ctx = canvas.getContext("2d");

//normal line(antialiased)
ctx.moveTo(20,20); ctx.lineTo(180,20);
ctx.stroke();

//set "crisp edge" filter
ctx.filter = "url(#crisp)";
//crisp line
ctx.beginPath();ctx.moveTo(20,40); ctx.lineTo(180,40);
ctx.moveTo(20, 50); ctx.lineTo(180, 70);
//crisp circle
ctx.moveTo(150, 130); ctx.arc(100, 130, 50, 0, Math.PI*2);
ctx.stroke();
<canvas id="canvas" width="200" height="200"></canvas>
<svg style="visibility:hidden;width:0;height:0;">
  <defs>
    <!--SVG filter to remove alpha-->
    <filter id="crisp">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0,1"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

1

根本的な解決はしていませんが、求めていた結果は取得できたので解決とします。

解決方法としては、
今回はある一定の色を数十色しか使用しない為、線を描くと同時に書いた範囲にgetImageDataを行いRGBを確認して、背景でもなく使用している数十色に当てはまらない場合は今回書いたRGBに無理してからputImageDataを行うというフィルタをかけました。
これで何とか理想の結果になりました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。