How does Chart.js creates BezierCurves with Tension?

[Udemology]

I am trying to understand the bezierCurve but struggle to find the formula or how Chart.js uses the bezierCurveTo.
I have tried to look into the code of tension but Tension only contains a floating number [from 0.0 - 1.0]. Most likely I am looking at the wrong place.

Could anyone perhaps point me in the right direction?

[LeeLenaleee]

Looking at the code it seems the bezier curved get drawn here:

Chart.js/src/helpers/helpers.canvas.js

Lines 295 to 306 in c057c96

	export function _bezierCurveTo(ctx, previous, target, flip) {
	if (!previous) {
	return ctx.lineTo(target.x, target.y);
	}
	ctx.bezierCurveTo(
	flip ? previous.cp1x : previous.cp2x,
	flip ? previous.cp1y : previous.cp2y,
	flip ? target.cp2x : target.cp1x,
	flip ? target.cp2y : target.cp1y,
	target.x,
	target.y);
	}

The points for the curve get updated here:

Chart.js/src/helpers/helpers.curve.js

Lines 185 to 211 in 0ba5c70

	export function _updateBezierControlPoints(points, options, area, loop, indexAxis) {
	let i, ilen, point, controlPoints;
	// Only consider points that are drawn in case the spanGaps option is used
	if (options.spanGaps) {
	points = points.filter((pt) => !pt.skip);
	}
	if (options.cubicInterpolationMode === 'monotone') {
	splineCurveMonotone(points, indexAxis);
	} else {
	let prev = loop ? points[points.length - 1] : points[0];
	for (i = 0, ilen = points.length; i < ilen; ++i) {
	point = points[i];
	controlPoints = splineCurve(
	prev,
	point,
	points[Math.min(i + 1, ilen - (loop ? 0 : 1)) % ilen],
	options.tension
	);
	point.cp1x = controlPoints.previous.x;
	point.cp1y = controlPoints.previous.y;
	point.cp2x = controlPoints.next.x;
	point.cp2y = controlPoints.next.y;
	prev = point;
	}
	}

Tension gets used here to calculate the points (const fa = t * s01; // scaling factor for triangle Ta):

Chart.js/src/helpers/helpers.curve.js

Lines 8 to 40 in 0ba5c70

	export function splineCurve(firstPoint, middlePoint, afterPoint, t) {
	// Props to Rob Spencer at scaled innovation for his post on splining between points
	// http://scaledinnovation.com/analytics/splines/aboutSplines.html
	// This function must also respect "skipped" points
	const previous = firstPoint.skip ? middlePoint : firstPoint;
	const current = middlePoint;
	const next = afterPoint.skip ? middlePoint : afterPoint;
	const d01 = distanceBetweenPoints(current, previous);
	const d12 = distanceBetweenPoints(next, current);
	let s01 = d01 / (d01 + d12);
	let s12 = d12 / (d01 + d12);
	// If all points are the same, s01 & s02 will be inf
	s01 = isNaN(s01) ? 0 : s01;
	s12 = isNaN(s12) ? 0 : s12;
	const fa = t * s01; // scaling factor for triangle Ta
	const fb = t * s12;
	return {
	previous: {
	x: current.x - fa * (next.x - previous.x),
	y: current.y - fa * (next.y - previous.y)
	},
	next: {
	x: current.x + fb * (next.x - previous.x),
	y: current.y + fb * (next.y - previous.y)
	}
	};
	}

[Udemology]

Hi LeeLenaLeee

Thank you for your answer. I have a lot of respect for how Chart.js did this. The bezier Curve is a real mind twister.