# Edit in JSFiddle

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

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(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

// 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);
}

a = parseFloat(e.target.value);
render();
});