uplot-webgpu 0.1.0

package/paths/monotoneCubic.js

@@ -0,0 +1,69 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { splineInterp } from "./spline.js";
+
+export function monotoneCubic(opts) {
+	return splineInterp(_monotoneCubic, opts);
+}
+
+// Monotone Cubic Spline interpolation, adapted from the Chartist.js implementation:
+// https://github.com/gionkunz/chartist-js/blob/e7e78201bffe9609915e5e53cfafa29a5d6c49f9/src/scripts/interpolation.js#L240-L369
+function _monotoneCubic(xs, ys, moveTo, lineTo, bezierCurveTo, pxRound) {
+	const n = xs.length;
+
+	if (n < 2)
+		return null;
+
+	const path = new GPUPath();
+
+	moveTo(path, xs[0], ys[0]);
+
+	if (n == 2)
+		lineTo(path, xs[1], ys[1]);
+	else {
+		let ms  = Array(n),
+			ds  = Array(n - 1),
+			dys = Array(n - 1),
+			dxs = Array(n - 1);
+
+		// calc deltas and derivative
+		for (let i = 0; i < n - 1; i++) {
+			dys[i] = ys[i + 1] - ys[i];
+			dxs[i] = xs[i + 1] - xs[i];
+			ds[i]  = dys[i] / dxs[i];
+		}
+
+		// determine desired slope (m) at each point using Fritsch-Carlson method
+		// http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation
+		ms[0] = ds[0];
+
+		for (let i = 1; i < n - 1; i++) {
+			if (ds[i] === 0 || ds[i - 1] === 0 || (ds[i - 1] > 0) !== (ds[i] > 0))
+				ms[i] = 0;
+			else {
+				ms[i] = 3 * (dxs[i - 1] + dxs[i]) / (
+					(2 * dxs[i] + dxs[i - 1]) / ds[i - 1] +
+					(dxs[i] + 2 * dxs[i - 1]) / ds[i]
+				);
+
+				if (!isFinite(ms[i]))
+					ms[i] = 0;
+			}
+		}
+
+		ms[n - 1] = ds[n - 2];
+
+		for (let i = 0; i < n - 1; i++) {
+			bezierCurveTo(
+				path,
+				xs[i] + dxs[i] / 3,
+				ys[i] + ms[i] * dxs[i] / 3,
+				xs[i + 1] - dxs[i] / 3,
+				ys[i + 1] - ms[i + 1] * dxs[i] / 3,
+				xs[i + 1],
+				ys[i + 1],
+			);
+		}
+	}
+
+	return path;
+}

package/paths/points.js

@@ -0,0 +1,67 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { orient, moveToH, moveToV, rectH, arcH, arcV, BAND_CLIP_FILL, BAND_CLIP_STROKE } from './utils.js';
+import { roundDec, PI } from '../scripts/utils/utils.js';
+
+// TODO: drawWrap(seriesIdx, drawPoints) (save, restore, translate, clip)
+export function points(opts) {
+	return (u, seriesIdx, idx0, idx1, filtIdxs) => {
+	//	log("drawPoints()", arguments);
+		let { pxRatio } = u;
+
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			let { pxRound, points } = series;
+
+			let moveTo, arc;
+
+			if (scaleX.ori == 0) {
+				moveTo = moveToH;
+				arc = arcH;
+			}
+			else {
+				moveTo = moveToV;
+				arc = arcV;
+			}
+
+			const width = roundDec(points.width * pxRatio, 3);
+
+			let rad = (points.size - points.width) / 2 * pxRatio;
+			let dia = roundDec(rad * 2, 3);
+
+			let fill = new GPUPath();
+			let clip = new GPUPath();
+
+			let { left: lft, top: top, width: wid, height: hgt } = u.bbox;
+
+			rectH(clip,
+				lft - dia,
+				top - dia,
+				wid + dia * 2,
+				hgt + dia * 2,
+			);
+
+			const drawPoint = pi => {
+				if (dataY[pi] != null) {
+					let x = pxRound(valToPosX(dataX[pi], scaleX, xDim, xOff));
+					let y = pxRound(valToPosY(dataY[pi], scaleY, yDim, yOff));
+
+					moveTo(fill, x + rad, y);
+					arc(fill, x, y, rad, 0, PI * 2);
+				}
+			};
+
+			if (filtIdxs)
+				filtIdxs.forEach(drawPoint);
+			else {
+				for (let pi = idx0; pi <= idx1; pi++)
+					drawPoint(pi);
+			}
+
+			return {
+				stroke: width > 0 ? fill : null,
+				fill,
+				clip,
+				flags: BAND_CLIP_FILL | BAND_CLIP_STROKE,
+			};
+		});
+	};
+}

package/paths/spline.js

@@ -0,0 +1,104 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { ifNull, nonNullIdxs } from '../scripts/utils/utils.js';
+import { orient, clipGaps, moveToH, moveToV, lineToH, lineToV, bezierCurveToH, bezierCurveToV, clipBandLine, BAND_CLIP_FILL, bandFillClipDirs, findGaps } from './utils.js';
+
+export function splineInterp(interp, opts) {
+	return (u, seriesIdx, idx0, idx1) => {
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			[idx0, idx1] = nonNullIdxs(dataY, idx0, idx1);
+
+			let pxRound = series.pxRound;
+
+			let alignGaps = opts?.alignGaps ?? series.alignGaps ?? 0;
+
+			let pixelForX = val => pxRound(valToPosX(val, scaleX, xDim, xOff));
+			let pixelForY = val => pxRound(valToPosY(val, scaleY, yDim, yOff));
+
+			let moveTo, bezierCurveTo, lineTo;
+
+			if (scaleX.ori == 0) {
+				moveTo = moveToH;
+				lineTo = lineToH;
+				bezierCurveTo = bezierCurveToH;
+			}
+			else {
+				moveTo = moveToV;
+				lineTo = lineToV;
+				bezierCurveTo = bezierCurveToV;
+			}
+
+			const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+
+			let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
+			let prevXPos = firstXPos;
+
+			let xCoords = [];
+			let yCoords = [];
+
+			let hasGap = false;
+
+			for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+				let yVal = dataY[i];
+
+				if (yVal != null) {
+					let xVal = dataX[i];
+					let xPos = pixelForX(xVal);
+
+					xCoords.push(prevXPos = xPos);
+					yCoords.push(pixelForY(dataY[i]));
+				}
+				else if (yVal === null)
+					hasGap = true;
+			}
+
+			const _paths = {stroke: interp(xCoords, yCoords, moveTo, lineTo, bezierCurveTo, pxRound), fill: null, clip: null, band: null, gaps: null, flags: BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);
+
+			if (series.fill != null || bandFillDir != 0) {
+				let fill = _paths.fill = new GPUPath(stroke);
+
+				let fillTo = series.fillTo(u, seriesIdx, series.min, series.max, bandFillDir);
+				let fillToY = pixelForY(fillTo);
+
+				lineTo(fill, prevXPos, fillToY);
+				lineTo(fill, firstXPos, fillToY);
+			}
+
+			if (!series.spanGaps) {
+			//	console.time('gaps');
+				let gaps = hasGap ? findGaps(dataX, dataY, idx0, idx1, dir, pixelForX, alignGaps) : [];
+
+			//	console.timeEnd('gaps');
+
+			//	console.log('gaps', JSON.stringify(gaps));
+
+				_paths.gaps = gaps = series.gaps(u, seriesIdx, idx0, idx1, gaps);
+
+				_paths.clip = clipGaps(gaps, scaleX.ori, xOff, yOff, xDim, yDim);
+			}
+
+			if (bandClipDir != 0) {
+				_paths.band = bandClipDir == 2 ? [
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke, -1),
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke,  1),
+				] : clipBandLine(u, seriesIdx, idx0, idx1, stroke, bandClipDir);
+			}
+
+			return _paths;
+
+			//  if FEAT_PATHS: false in rollup.config.js
+			//	u.ctx.save();
+			//	u.ctx.beginPath();
+			//	u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+			//	u.ctx.clip();
+			//	u.ctx.strokeStyle = u.series[sidx].stroke;
+			//	u.ctx.stroke(stroke);
+			//	u.ctx.fillStyle = u.series[sidx].fill;
+			//	u.ctx.fill(fill);
+			//	u.ctx.restore();
+			//	return null;
+		});
+	};
+}

package/paths/stepped.js

@@ -0,0 +1,125 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { ifNull, nonNullIdxs } from '../scripts/utils/utils.js';
+import { orient, clipGaps, lineToH, lineToV, clipBandLine, BAND_CLIP_FILL, bandFillClipDirs, findGaps } from './utils.js';
+
+// BUG: align: -1 behaves like align: 1 when scale.dir: -1
+export function stepped(opts) {
+	const align = ifNull(opts.align, 1);
+	// whether to draw ascenders/descenders at null/gap bondaries
+	const ascDesc = ifNull(opts.ascDesc, false);
+	const extend = ifNull(opts.extend, false);
+
+	return (u, seriesIdx, idx0, idx1) => {
+		let { pxRatio } = u;
+
+		return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+			[idx0, idx1] = nonNullIdxs(dataY, idx0, idx1);
+
+			let pxRound = series.pxRound;
+
+			let alignGaps = opts?.alignGaps ?? series.alignGaps ?? 0;
+
+			let { left, width } = u.bbox;
+
+			let pixelForX = val => pxRound(valToPosX(val, scaleX, xDim, xOff));
+			let pixelForY = val => pxRound(valToPosY(val, scaleY, yDim, yOff));
+
+			let lineTo = scaleX.ori == 0 ? lineToH : lineToV;
+
+			const _paths = {stroke: new GPUPath(), fill: null, clip: null, band: null, gaps: null, flags: BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+
+			let hasGap = false;
+
+			let prevYPos  = pixelForY(dataY[dir == 1 ? idx0 : idx1]);
+			let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
+			let prevXPos = firstXPos;
+
+			let firstXPosExt = firstXPos;
+
+			if (extend && align == -1) {
+				firstXPosExt = left;
+				lineTo(stroke, firstXPosExt, prevYPos);
+			}
+
+			lineTo(stroke, firstXPos, prevYPos);
+
+			for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+				let yVal1 = dataY[i];
+
+				if (yVal1 == null) {
+					if (yVal1 === null)
+						hasGap = true;
+
+					continue;
+				}
+
+				let x1 = pixelForX(dataX[i]);
+				let y1 = pixelForY(yVal1);
+
+				if (align == 1)
+					lineTo(stroke, x1, prevYPos);
+				else
+					lineTo(stroke, prevXPos, y1);
+
+				lineTo(stroke, x1, y1);
+
+				prevYPos = y1;
+				prevXPos = x1;
+			}
+
+			let prevXPosExt = prevXPos;
+
+			if (extend && align == 1) {
+				prevXPosExt = left + width;
+				lineTo(stroke, prevXPosExt, prevYPos);
+			}
+
+			let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);
+
+			if (series.fill != null || bandFillDir != 0) {
+				let fill = _paths.fill = new GPUPath(stroke);
+
+				let fillTo = series.fillTo(u, seriesIdx, series.min, series.max, bandFillDir);
+				let fillToY = pixelForY(fillTo);
+
+				lineTo(fill, prevXPosExt, fillToY);
+				lineTo(fill, firstXPosExt, fillToY);
+			}
+
+			if (!series.spanGaps) {
+			//	console.time('gaps');
+				let gaps = hasGap ? findGaps(dataX, dataY, idx0, idx1, dir, pixelForX, alignGaps) : [];
+
+			//	console.timeEnd('gaps');
+
+			//	console.log('gaps', JSON.stringify(gaps));
+
+				// expand/contract clips for ascenders/descenders
+				let halfStroke = (series.width * pxRatio) / 2;
+				let startsOffset = (ascDesc || align ==  1) ?  halfStroke : -halfStroke;
+				let endsOffset   = (ascDesc || align == -1) ? -halfStroke :  halfStroke;
+
+				gaps.forEach(g => {
+					g[0] += startsOffset;
+					g[1] += endsOffset;
+				});
+
+				_paths.gaps = gaps = series.gaps(u, seriesIdx, idx0, idx1, gaps);
+
+				_paths.clip = clipGaps(gaps, scaleX.ori, xOff, yOff, xDim, yDim);
+			}
+
+			if (bandClipDir != 0) {
+				_paths.band = bandClipDir == 2 ? [
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke, -1),
+					clipBandLine(u, seriesIdx, idx0, idx1, stroke,  1),
+				] : clipBandLine(u, seriesIdx, idx0, idx1, stroke, bandClipDir);
+			}
+
+			return _paths;
+		});
+	};
+}

package/paths/utils.js

@@ -0,0 +1,301 @@
+import { GPUPath } from '../scripts/webgpu/GPUPath.js';
+import { round, incrRound, retArg0, min, EMPTY_ARR, ifNull } from "../scripts/utils/utils.js";
+
+export const BAND_CLIP_FILL   = 1 << 0;
+export const BAND_CLIP_STROKE = 1 << 1;
+
+export function orient(u, seriesIdx, cb) {
+	const mode = u.mode;
+	const series = u.series[seriesIdx];
+	const data = mode == 2 ? u._data[seriesIdx] : u._data;
+	const scales = u.scales;
+	const bbox   = u.bbox;
+
+	let dx = data[0],
+		dy = mode == 2 ? data[1] : data[seriesIdx],
+		sx = mode == 2 ? scales[series.facets[0].scale] : scales[u.series[0].scale],
+		sy = mode == 2 ? scales[series.facets[1].scale] : scales[series.scale],
+		l = bbox.left,
+		t = bbox.top,
+		w = bbox.width,
+		h = bbox.height,
+		H = u.valToPosH,
+		V = u.valToPosV;
+
+	return (sx.ori == 0
+		? cb(
+			series,
+			dx,
+			dy,
+			sx,
+			sy,
+			H,
+			V,
+			l,
+			t,
+			w,
+			h,
+			moveToH,
+			lineToH,
+			rectH,
+			arcH,
+			bezierCurveToH,
+		)
+		: cb(
+			series,
+			dx,
+			dy,
+			sx,
+			sy,
+			V,
+			H,
+			t,
+			l,
+			h,
+			w,
+			moveToV,
+			lineToV,
+			rectV,
+			arcV,
+			bezierCurveToV,
+		)
+	);
+}
+
+export function bandFillClipDirs(self, seriesIdx) {
+	let fillDir = 0;
+
+	// 2 bits, -1 | 1
+	let clipDirs = 0;
+
+	let bands = ifNull(self.bands, EMPTY_ARR);
+
+	for (let i = 0; i < bands.length; i++) {
+		let b = bands[i];
+
+		// is a "from" band edge
+		if (b.series[0] == seriesIdx)
+			fillDir = b.dir;
+		// is a "to" band edge
+		else if (b.series[1] == seriesIdx) {
+			if (b.dir == 1)
+				clipDirs |= 1;
+			else
+				clipDirs |= 2;
+		}
+	}
+
+	return [
+		fillDir,
+		(
+			clipDirs == 1 ? -1 : // neg only
+			clipDirs == 2 ?  1 : // pos only
+			clipDirs == 3 ?  2 : // both
+			                 0   // neither
+		)
+	];
+}
+
+export function seriesFillTo(self, seriesIdx, dataMin, dataMax, bandFillDir) {
+	let mode = self.mode;
+	let series = self.series[seriesIdx];
+	let scaleKey = mode == 2 ? series.facets[1].scale : series.scale;
+	let scale = self.scales[scaleKey];
+
+	return (
+		bandFillDir == -1 ? scale.min :
+		bandFillDir ==  1 ? scale.max :
+		scale.distr ==  3 ? (
+			scale.dir == 1 ? scale.min :
+			scale.max
+		) : 0
+	);
+}
+
+// creates inverted band clip path (from stroke path -> yMax || yMin)
+// clipDir is always inverse of fillDir
+// default clip dir is upwards (1), since default band fill is downwards/fillBelowTo (-1) (highIdx -> lowIdx)
+export function clipBandLine(self, seriesIdx, idx0, idx1, strokePath, clipDir) {
+	return orient(self, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+		let pxRound = series.pxRound;
+
+		const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);
+		const lineTo = scaleX.ori == 0 ? lineToH : lineToV;
+
+		let frIdx, toIdx;
+
+		if (dir == 1) {
+			frIdx = idx0;
+			toIdx = idx1;
+		}
+		else {
+			frIdx = idx1;
+			toIdx = idx0;
+		}
+
+		// path start
+		let x0 = pxRound(valToPosX(dataX[frIdx], scaleX, xDim, xOff));
+		let y0 = pxRound(valToPosY(dataY[frIdx], scaleY, yDim, yOff));
+		// path end x
+		let x1 = pxRound(valToPosX(dataX[toIdx], scaleX, xDim, xOff));
+		// upper or lower y limit
+		let yLimit = pxRound(valToPosY(clipDir == 1 ? scaleY.max : scaleY.min, scaleY, yDim, yOff));
+
+		let clip = new GPUPath(strokePath);
+
+		lineTo(clip, x1, yLimit);
+		lineTo(clip, x0, yLimit);
+		lineTo(clip, x0, y0);
+
+		return clip;
+	});
+}
+
+export function clipGaps(gaps, ori, plotLft, plotTop, plotWid, plotHgt) {
+	let clip = null;
+
+	// create clip path (invert gaps and non-gaps)
+	if (gaps.length > 0) {
+		clip = new GPUPath();
+
+		const rect = ori == 0 ? rectH : rectV;
+
+		let prevGapEnd = plotLft;
+
+		for (let i = 0; i < gaps.length; i++) {
+			let g = gaps[i];
+
+			if (g[1] > g[0]) {
+				let w = g[0] - prevGapEnd;
+
+				w > 0 && rect(clip, prevGapEnd, plotTop, w, plotTop + plotHgt);
+
+				prevGapEnd = g[1];
+			}
+		}
+
+		let w = plotLft + plotWid - prevGapEnd;
+
+		// hack to ensure we expand the clip enough to avoid cutting off strokes at edges
+		let maxStrokeWidth = 10;
+
+		w > 0 && rect(clip, prevGapEnd, plotTop - maxStrokeWidth / 2, w, plotTop + plotHgt + maxStrokeWidth);
+	}
+
+	return clip;
+}
+
+export function addGap(gaps, fromX, toX) {
+	let prevGap = gaps[gaps.length - 1];
+
+	if (prevGap && prevGap[0] == fromX)			// TODO: gaps must be encoded at stroke widths?
+		prevGap[1] = toX;
+	else
+		gaps.push([fromX, toX]);
+}
+
+export function findGaps(xs, ys, idx0, idx1, dir, pixelForX, align) {
+	let gaps = [];
+	let len = xs.length;
+
+	for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
+		let yVal = ys[i];
+
+		if (yVal === null) {
+			let fr = i, to = i;
+
+			if (dir == 1) {
+				while (++i <= idx1 && ys[i] === null)
+					to = i;
+			}
+			else {
+				while (--i >= idx0 && ys[i] === null)
+					to = i;
+			}
+
+			let frPx = pixelForX(xs[fr]);
+			let toPx = to == fr ? frPx : pixelForX(xs[to]);
+
+			// if value adjacent to edge null is same pixel, then it's partially
+			// filled and gap should start at next pixel
+			let fri2 = fr - dir;
+			let frPx2 = align <= 0 && fri2 >= 0 && fri2 < len ? pixelForX(xs[fri2]) : frPx;
+		//	if (frPx2 == frPx)
+		//		frPx++;
+		//	else
+				frPx = frPx2;
+
+			let toi2 = to + dir;
+			let toPx2 = align >= 0 && toi2 >= 0 && toi2 < len ? pixelForX(xs[toi2]) : toPx;
+		//	if (toPx2 == toPx)
+		//		toPx--;
+		//	else
+				toPx = toPx2;
+
+			if (toPx >= frPx)
+				gaps.push([frPx, toPx]); // addGap
+		}
+	}
+
+	return gaps;
+}
+
+export function pxRoundGen(pxAlign) {
+	return pxAlign == 0 ? retArg0 : pxAlign == 1 ? round : v => incrRound(v, pxAlign);
+}
+
+/*
+// inefficient linear interpolation that does bi-directinal scans on each call
+export function costlyLerp(i, idx0, idx1, _dirX, dataY) {
+	let prevNonNull = nonNullIdx(dataY, _dirX == 1 ? idx0 : idx1, i, -_dirX);
+	let nextNonNull = nonNullIdx(dataY, i, _dirX == 1 ? idx1 : idx0,  _dirX);
+
+	let prevVal = dataY[prevNonNull];
+	let nextVal = dataY[nextNonNull];
+
+	return prevVal + (i - prevNonNull) / (nextNonNull - prevNonNull) * (nextVal - prevVal);
+}
+*/
+
+function rect(ori) {
+	let moveTo = ori == 0 ?
+		moveToH :
+		moveToV;
+
+	let arcTo = ori == 0 ?
+		(p, x1, y1, x2, y2, r) => { p.arcTo(x1, y1, x2, y2, r) } :
+		(p, y1, x1, y2, x2, r) => { p.arcTo(x1, y1, x2, y2, r) };
+
+	let rect = ori == 0 ?
+		(p, x, y, w, h) => { p.rect(x, y, w, h); } :
+		(p, y, x, h, w) => { p.rect(x, y, w, h); };
+
+	return (p, x, y, w, h, endRad = 0, baseRad = 0) => {
+		if (endRad == 0 && baseRad == 0)
+			rect(p, x, y, w, h);
+		else {
+			endRad  = min(endRad,  w / 2, h / 2);
+			baseRad = min(baseRad, w / 2, h / 2);
+
+			// adapted from https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-using-html-canvas/7838871#7838871
+			moveTo(p, x + endRad, y);
+			arcTo(p, x + w, y, x + w, y + h, endRad);
+			arcTo(p, x + w, y + h, x, y + h, baseRad);
+			arcTo(p, x, y + h, x, y, baseRad);
+			arcTo(p, x, y, x + w, y, endRad);
+			p.closePath();
+		}
+	};
+}
+
+// orientation-inverting canvas functions
+export const moveToH = (p, x, y) => { p.moveTo(x, y); }
+export const moveToV = (p, y, x) => { p.moveTo(x, y); }
+export const lineToH = (p, x, y) => { p.lineTo(x, y); }
+export const lineToV = (p, y, x) => { p.lineTo(x, y); }
+export const rectH = rect(0);
+export const rectV = rect(1);
+export const arcH = (p, x, y, r, startAngle, endAngle) => { p.arc(x, y, r, startAngle, endAngle); }
+export const arcV = (p, y, x, r, startAngle, endAngle) => { p.arc(x, y, r, startAngle, endAngle); }
+export const bezierCurveToH = (p, bp1x, bp1y, bp2x, bp2y, p2x, p2y) => { p.bezierCurveTo(bp1x, bp1y, bp2x, bp2y, p2x, p2y); };
+export const bezierCurveToV = (p, bp1y, bp1x, bp2y, bp2x, p2y, p2x) => { p.bezierCurveTo(bp1x, bp1y, bp2x, bp2y, p2x, p2y); };