HTML5画布线不流畅？

Question

正如您在下面的图片中看到的那样，我的画布路径是像素化的或者不像是光滑的。我想知道是否有办法让它们顺利出来？

有效代码块：

if (this.shade.color.topTrim) {
  var toptrim = new Image();
  toptrim.onload = function() {
    for (i = 0; i < c.length; i++) {
      var canvas = c[i];
      var ctx = canvas.getContext("2d");
      var pattern = ctx.createPattern(toptrim, "repeat");
      ctx.beginPath();
        ctx.moveTo( ( 150 - ( ProductDesigner.shade.model.radius / 2 ) ) , 80 );
        ctx.quadraticCurveTo( 150 , 70, 150 + ( ProductDesigner.shade.model.radius / 2 ), 80);
        ctx.lineTo( 150 + ( ProductDesigner.shade.model.radius / 2 ), 83 );
        ctx.quadraticCurveTo( 150 , 73, 150 - ( ProductDesigner.shade.model.radius / 2 ), 83);
        ctx.fillStyle = pattern;
        ctx.fill();
      ctx.closePath();
    }
  }
  toptrim.src = "/wp-content/plugins/productdesigner/assets/Trimmings/" + this.shade.color.topTrim + ".jpg";
} else {
  for (i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
      ctx.moveTo( ( 150 - ( ProductDesigner.shade.model.radius / 2 ) ) , 80 );
      ctx.quadraticCurveTo( 150 , 70, 150 + ( ProductDesigner.shade.model.radius / 2 ), 80);
      ctx.lineTo( 150 + ( ProductDesigner.shade.model.radius / 2 ), 83 );
      ctx.quadraticCurveTo( 150 , 73, 150 - ( ProductDesigner.shade.model.radius / 2 ), 83);
    ctx.closePath();
    ctx.stroke();
  }
}