39932


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)

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


CC BY-SA 3.0
2017-11-29T02:32:28.500
39927
2017-11-29T10:24:10.357
2017-11-29T04:56:47.797
26372
26372
question
javascript
canvas stroke()をした時の線の縁をぼやけさせない様にする方法について


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

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


CC BY-SA 3.0
2017-11-29T07:32:38.213
39930
2017-11-29T07:32:38.213
26372
39927
answer


以前本家の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]


CC BY-SA 3.0
2017-11-29T10:24:10.357
39932
2017-11-29T10:24:10.357
5667
39927
answer