You only get 1 context.lineWidth setting for each context.beginPath.
That means your context.quadraticCurveTo can only have 1 linewidth.
To get a variable width line without the "chunky" width changes, you must break your quadratic curves into many smaller line-segments.
With many line-segements you can gradually change the line width between each segment.
The following function calculates xy points along a quadratic curve.
function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x;
var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y;
return( {x:x,y:y} );
}
These are the inputs to the function:
- startPt, controlPt, endPt are objects: eg. { x:10, y:20 }
- T is an interval along the curve from 0.00 to 1.00
- T==0.00 at the start of the line
- T==1.00 at the end of the line
The rule of 1 lineWidth per beginPath still applies, but drawing multiple line segments per curve gives you more beginPaths with which to gradually adjust your lineWidth.