在画布上绘制平滑线条

我想在画布上画一条线

context.globalCompositeOperation = 'destination-out';
context.globalAlpha = 0.118;

结果如下：

图像的背景是一个黄色的矩形。我使用圆圈将其拖放到图像上，然后绘制线条。正如你所看到的那样，我绘制的线条并不是那么平滑。你可以看到圆圈而你没有复合线。

The background if the image is a yellow rectangle. I use a circle to drag and drop it over the image and it will paint the line. As you can see my drawn line is not so smooth. You can see the circles and you do not have a compound line.

我创建了一个 JSFiddle here：

I created a JSFiddle here:

console.clear();

var history = new Array();

var imageObj = new Image();
var img = null;

stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 400
});
layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
      x: 30,
      y: 30,
      width: 438,
      height: 300,
      fill: 'yellow'
    });
layer.add(rect);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');



var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
    opacity: 0.7,
    fill: '#ff5e0a',
    stroke: '#d95009',
    strokeWidth: 1,
    draggable: true
});
layer.add(circle);


circle.on('dragmove touchmove', function (e) {
    erase(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
});


imageObj.onload = function () {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

    img = new Konva.Image({
        x: 30,
        y: 30,
        image: canvas
    });

    layer.add(img);

    circle.moveToTop();
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";


function erase(absX, absY, radius, imgX, imgY) {
    var x = 0;
    var y = 0;

    // set pointer
    circle.x(absX);
    circle.y(absY);

    x= absX - imgX;
    y= absY - imgY;

    context.globalCompositeOperation = 'destination-out';
    context.globalAlpha = 0.118;
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fill();

    layer.draw();
}

如何在无法看到每个小块的情况下绘制更平滑和复合的线条圈子？

How can I draw more smooth and compound lines where you cannot see each small chunk of the circles?