<canvas height="600" width="800"></canvas>
<input type="checkbox" id="show-construction" checked/>
<label for="show-construction">Show Construction</label>
<input type="checkbox" id="show-css-animation" checked/>
<label for="show-css-animation">Show CSS Animation</label>
<div>😸</div>

canvas { 
  border: 1px solid black; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
:root {
  --p0x: 50;
  --p0y: 50;
  --p1x: 178;
  --p1y: 178;
  --p2x: 50;
  --p2y: 306;
  --q1x: calc(2 * var(--p1x) - var(--p2x));
  --q1y: calc(2 * var(--p1y) - var(--p2y));
}
div {
  position: absolute;
  user-select: none;
  pointer-events: none;
  top: -16px;
  left: -16px;
  font-size: 24px;
  animation-name: move1, move2, progress;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move1 {
  from { transform: translate3d(calc(1px * var(--p0x)), calc(1px * var(--p0y)), 0px); }
  to { transform: translate3d(calc(1px * var(--q1x)), calc(1px * var(--q1y)), 0px); }
}
@keyframes move2 {
  to { transform: translate3d(calc(1px * var(--p2x)), calc(1px * var(--p2y)), 0px); }
}
@keyframes progress {
  from { z-index: 0; }
  to { z-index: 1000; }
}

const root = document.querySelector(':root');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const div = document.querySelector('div');
const showConstruction = document.querySelector('#show-construction');
const showCssAnimation = document.querySelector('#show-css-animation');

const pointRadius = 5;
let dragging = 'none';

function getVars() {
  const rootStyle = window.getComputedStyle(root);
  const divStyle = window.getComputedStyle(div);
  const vars = {};
  for (let i = 0; i < 3; ++i) {
    for (const xy of ['x', 'y']) {
      const varName = 'p' + i.toString() + xy;
      vars[varName] = parseInt(rootStyle.getPropertyValue('--' + varName));
    }
  }
  
  vars.progress =  parseInt(divStyle.getPropertyValue('z-index')) / 1000;
  return vars;
}

function drawPoint(x, y, fillStyle) {
 ctx.save();
 ctx.fillStyle = fillStyle;
 ctx.beginPath();
 ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
 ctx.fill();
 ctx.restore();
}

function drawControlPoint(x, y) {
 ctx.save();
 ctx.strokeStyle = 'black';
 ctx.lineWidth = 2;
 ctx.fillStyle = 'white';
 ctx.beginPath();
 ctx.rect(x - pointRadius, y - pointRadius, pointRadius * 2, pointRadius * 2);
 ctx.stroke();
 ctx.fill();
 ctx.restore();
}

function drawLine(x1, y1, x2, y2, strokeStyle) {
 ctx.save();
 ctx.strokeStyle = strokeStyle;
 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.stroke();
 ctx.restore();
}

function drawBezier(vars) {
 ctx.save();
 ctx.strokeStyle = 'red';
 ctx.lineWidth = 2;
 ctx.beginPath();
 ctx.moveTo(vars.p0x, vars.p0y);
 ctx.quadraticCurveTo(
   vars.p1x, vars.p1y,
   vars.p2x, vars.p2y);
 ctx.stroke();
 ctx.restore();
}

function linearInterpolation(v1, v2, p) {
  return (1 - p) * v1 + p * v2;
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  const vars = getVars(); 
  
  const q1x = 2 * vars.p1x - vars.p2x;
  const q1y = 2 * vars.p1y - vars.p2y;
  
  const m1x = linearInterpolation(vars.p0x, q1x, vars.progress);
  const m1y = linearInterpolation(vars.p0y, q1y, vars.progress);
  
  const m2x = linearInterpolation(vars.p0x, vars.p1x, vars.progress);
  const m2y = linearInterpolation(vars.p0y, vars.p1y, vars.progress);
  const m3x = linearInterpolation(vars.p1x, vars.p2x, vars.progress);
  const m3y = linearInterpolation(vars.p1y, vars.p2y, vars.progress);
  
  
  drawLine(vars.p0x, vars.p0y, vars.p1x, vars.p1y, '#777');
  drawLine(vars.p1x, vars.p1y, vars.p2x, vars.p2y, '#777');
  
  if (showCssAnimation.checked) {
    drawLine(vars.p0x, vars.p0y, q1x, q1y, '#00f');
    drawLine(m1x, m1y, vars.p2x, vars.p2y, '#00f');
  }
  
  if (showConstruction.checked) {
    drawLine(m2x, m2y, m3x, m3y, '#777');
  }
  
  if (showCssAnimation.checked) {
    drawPoint(q1x, q1y, '#777');
    drawPoint(m1x, m1y, 'blue');
  }
  
  if (showConstruction.checked) {
    drawPoint(m2x, m2y, '#777');
    drawPoint(m3x, m3y, '#777');
  }
  
  drawBezier(vars);
  
  drawPoint(vars.p0x, vars.p0y, 'black');
  drawPoint(vars.p2x, vars.p2y, 'black');
  drawControlPoint(vars.p1x, vars.p1y);
  
  window.requestAnimationFrame(redraw);
}

redraw();

function getMousePositionWithinCanvas(e) {
  const rect = canvas.getBoundingClientRect();
  return [e.clientX - rect.left, e.clientY - rect.top];
}

function canDrag(x, y, x1, y1) {
  return Math.max(Math.abs(x - x1), Math.abs(y - y1)) < pointRadius;
}

canvas.addEventListener('mousedown', (e) => {
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  
  dragging = 'none';
  const vars = getVars();
  if (canDrag(mouseX, mouseY, vars.p0x, vars.p0y)) {
    dragging = 'p0';
  } else if (canDrag(mouseX, mouseY, vars.p1x, vars.p1y)) {
    dragging = 'p1';
  } else if (canDrag(mouseX, mouseY, vars.p2x, vars.p2y)) {
    dragging = 'p2';
  }
});

canvas.addEventListener('mouseup', (e) => {
  dragging = 'none';
});

canvas.addEventListener('mousemove', (e) => {
  if (dragging === 'none') {
    return;
  }
  
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  root.style.setProperty('--' + dragging + 'x', mouseX);
  root.style.setProperty('--' + dragging + 'y', mouseY);
});