canvas - KineticJS:流れるにつれて広がるベジエ曲線の場合 - 角を丸くする方法は?

Question

KineticJS を使用して、流れるにつれて広がるベジエ曲線を描画しています。次に例を示します。

フラット http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-flat-end.png

ワイド端の角を丸くするには、どのようなアプローチが考えられるでしょうか? 例えば：

丸め http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-rounded-end.jpg

情報をお寄せいただきありがとうございます。

参考までに、私が現在使用しているコードは次のとおりです。

//based on: http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas                
//draw a bezier curve that gets larger as it flows
function plotFlow(centerLeft, centerRight, thicknessLeft, thicknessRight, color, desiredWidth) {
    var bezierLayer = mainLayer.getAttrs().bezierLayer;
    var context = bezierLayer.getContext();
    var leftUpper = {x: centerLeft.x, y: centerLeft.y - thicknessLeft / 2};
    var leftLower = {x: centerLeft.x, y: leftUpper.y + thicknessLeft};
    var rightUpper = {x: centerRight.x, y: centerRight.y - thicknessRight / 2};
    var rightLower = {x: centerRight.x, y: rightUpper.y + thicknessRight};

    var center = (centerRight.x + centerLeft.x) / 2;
    var cp1Upper = {x: center, y: leftUpper.y};
    var cp2Upper = {x: center, y: rightUpper.y};
    var cp1Lower = {x: center, y: rightLower.y};
    var cp2Lower = {x: center, y: leftLower.y};

    var bezierCurve = new Kinetic.Shape({
        drawFunc: function(canvas) {
            var context = canvas.getContext('2d');
            context.fillStyle = this.getFill();
            context.beginPath();
            context.moveTo(leftUpper.x, leftUpper.y);
            context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
            context.lineTo(rightLower.x, rightLower.y);
            context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
            context.lineTo(leftUpper.x, leftUpper.y);
            context.fill();
            canvas.stroke(this);

        },
        fill: color,
        stroke: color,
        strokeWidth: 2
    });

    bezierCurve.setAttrs({'color': color, 'leftUpper': leftUpper, 'leftLower': leftLower, 'rightUpper': rightUpper, 'rightLower': rightLower, 'cp1Upper': cp1Upper, 'cp2Upper': cp2Upper, 'cp1Lower': cp1Lower, 'cp2Lower': cp2Lower});

    bezierLayer.add(bezierCurve);
}