canvas stroke()をした時の線の縁をぼやけさせない様にする方法について


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

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

[code]

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

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

この時こうなってしまいます。  
[![ぼやけてしまう画像](https://i.stack.imgur.com/682ap.png)](https://i.stack.imgur.com/682ap.png)

こうなってほしいです。(ペイントで少し修正しました。)  
[![修正した画像](https://i.stack.imgur.com/CMyle.png)](https://i.stack.imgur.com/CMyle.png)

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




以前本家の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プロパティに設定するだけ済みます.

[code]

    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();
[/code]

[code]

    <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>
[/code]




以前本家の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プロパティに設定するだけ済みます.

[code]

    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();
[/code]

[code]

    <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>
[/code]

