Edit in JSFiddle

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const craniumRadius = 100;
const craniumCenterX = canvas.width / 2;
const craniumCenterY = canvas.height / 3;

// Can we create a formula for some of these???? Based on a face direction???
// The shear should probably always kiss the cranium for now. On either side....
// Handle side mode and front/back later....
let a = 1;
let b = 1.45;
let c = 0;

let shearDeltaY = 0;

function oval(cx, cy, rx, ry) {
	ctx.beginPath();
	// ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
	ctx.ellipse(cx, cy, rx, ry || rx, 0, 0, 360);
	ctx.stroke();
}

function line(x1, y1, x2, y2) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.stroke();
}

function render() {
	ctx.fillStyle = "#eee";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	const shearWidth = craniumRadius * a;
	const shearHeight = craniumRadius * b;
	const shearCenterX = craniumCenterX - craniumRadius + shearWidth / 2 + c;
	const shearCenterY = craniumCenterY;
	const craniumLeft = craniumCenterX - craniumRadius;
	const craniumRight = craniumCenterX + craniumRadius;
	const shearRight = shearCenterX + shearWidth / 2;
	const shearTop = shearCenterY - shearHeight / 2;
	const shearBottom = shearCenterY + shearHeight / 2;
	// interception of top shear line and cranium circle
	const shearTopCraniumX =
		Math.sqrt(craniumRadius ** 2 - (shearTop - craniumCenterY) ** 2) +
		craniumCenterX;
	const shearBottomCraniumX =
		Math.sqrt(craniumRadius ** 2 - (shearBottom - craniumCenterY) ** 2) +
		craniumCenterX;
	const jawTop =
		Math.sqrt(craniumRadius ** 2 - (shearCenterX - craniumCenterX) ** 2) +
		craniumCenterY;
	const browCenterX = (shearRight + craniumRight) / 2;
	const browCenterY = shearCenterY;
	const noseBaseCenterX = (shearCenterX + craniumRight) / 2;
	const noseBaseCenterY = shearBottom;
	const jawCenterX = noseBaseCenterX;
	const jawCenterY = noseBaseCenterY + shearHeight / 2;
	const mouthCenterX = noseBaseCenterX;
	const mouthCenterY = (noseBaseCenterY + jawCenterY) / 2;

	ctx.strokeStyle = "#444";

	// Cranium
	oval(craniumCenterX, craniumCenterY, craniumRadius);

	// Shear
	oval(shearCenterX, shearCenterY, shearWidth / 2, shearHeight / 2);

	// Lines
	ctx.strokeStyle = "#aaa";

	// Hairline
	line(shearCenterX, shearTop, shearTopCraniumX, shearTop);

	// Browline
	line(craniumLeft, shearCenterY, craniumRight, shearCenterY);

	// Nose base line
	line(shearCenterX, shearBottom, shearBottomCraniumX, shearBottom);

	// Side vertical
	line(shearCenterX, shearTop, shearCenterX, jawTop);

	// Brow
	oval(browCenterX, browCenterY, 4);

	// Nose
	oval(noseBaseCenterX, noseBaseCenterY, 4);

	// Mouth
	oval(mouthCenterX, mouthCenterY, 4);

	// Jaw base
	oval(jawCenterX, jawCenterY, 4);

	// Front face edge
	line(shearRight, shearCenterY, shearRight, jawCenterY);

	// Jaw left
	line(shearCenterX, jawTop, shearRight, jawCenterY);

	// Jaw bottom
	line(shearRight, jawCenterY, browCenterX, jawCenterY);

	// Jaw right
	line(browCenterX, jawCenterY, craniumRight, craniumCenterY);
}

document.querySelector("#a").addEventListener("input", e => {
	a = parseFloat(e.target.value);
	render();
});
document.querySelector("#b").addEventListener("input", e => {
	b = parseFloat(e.target.value);
	render();
});
document.querySelector("#c").addEventListener("input", e => {
	c = parseFloat(e.target.value);
	render();
});

render();