KineticJS: For a Bezier Curve that Widens as it Flows - How to Add Rounded Corners?

Question

I'm using KineticJS to draw a bezier curve that widens as it flows. Here's an example:

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

What would be some possible approaches for giving it rounded corners at the wide end? For example:

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

Thanks very much in advance to all for any info.

For reference, here's the code I'm currently using:

//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);
}

Answer 1

Yes.

1. Given a line segment between rightUpper and rightLower (call that UL).
2. Find midpoint of UL.
3. Find the slope of UL.
4. Extend a line perpendicularly from the midpoint of UL.
5. Draw a context.quadraticCurveTo from rightUpper to rightLower with the control point on the perpendicular line (The further out on the perpendicular line, the more pointy the curve).
6. Alternately, you could draw a bezierCurveTo. Just make sure the 2 control points are equidistant from line UL to avoid a lopsided curve.

Using either quadratic or Bezier curves, be sure to keep the control point(s) very close to UL. The further away, the more you'll get a full curve at the end rather than rounded corners.