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

i'm using kineticjs draw bezier curve widens flows. here's example:

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

what possible approaches giving rounded corners @ wide end? example:

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

thanks in advance info.

for reference, here's code i'm using:

//based on: http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas                 //draw bezier curve gets larger 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); } 

yes.

1. given line segment between rightupper , rightlower (call ul).
2. find midpoint of ul.
3. find slope of ul.
4. extend line perpendicularly midpoint of ul.
5. draw context.quadraticcurveto rightupper rightlower control point on perpendicular line (the further out on perpendicular line, more pointy curve).
6. alternately, draw beziercurveto. make sure 2 control points equidistant line ul avoid lopsided curve.

using either quadratic or bezier curves, sure keep control point(s) close ul. further away, more you'll full curve @ end rather rounded corners.