入力時にQuadraticCurveTo（）をスムーズにすることができますか？

Question

私の状況を解決するための解決策がまだ見つかりませんでしたので、私はここに投稿しています。私はアンチエイリアスを使用する方法を見つけましたが、クリックすると翻訳が書き換えられ、クリックするたびに画像が0.5ずつ移動するので、それは私には良いことではありません。

いずれにしても問題ありません。キャンバスの要素に2次曲線を描いていますが、塗りつぶされていると、形が鮮明ではなく、ピクセル化しているように見えます。形状の滑らかさを改善する方法はありますか？

デザインは、パスに半画素ストロークを追加することができます場合は

var c = document.getElementsByClassName("myCanvas"); 
 

 
    for (var i = 0; i < c.length; i++) { 
 
    var canvas = c[i]; 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.beginPath(); 
 
      ctx.moveTo((150 - (300/2)) , 80); 
 
      ctx.quadraticCurveTo(150 , 70, 150 + (300/2), 80); 
 
      ctx.lineTo(150 + (300/2), 83); 
 
      ctx.quadraticCurveTo(150 , 73, 150 - (300/2), 83); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 
    }

<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> 
 
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> 
 
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

Answer 1

：

var c = document.getElementsByClassName("myCanvas"); 
 

 
    for (var i = 0; i < c.length; i++) { 
 
    var canvas = c[i]; 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.beginPath(); 
 
      ctx.moveTo((150 - (300/2)) , 80); 
 
      ctx.quadraticCurveTo(150 , 70, 150 + (300/2), 80); 
 
      ctx.lineTo(150 + (300/2), 83); 
 
      ctx.quadraticCurveTo(150 , 73, 150 - (300/2), 83); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 
     ctx.lineWidth=0.50; 
 
     ctx.stroke(); 
 
    }

<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> 
 
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> 
 
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>