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

canvas { 
  border: 1px solid black; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@for $i from 1 to 7 {
  @property --q#{$i}x {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
  @property --q#{$i}y {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
}
:root {
  --p0x: 100;
  --p0y: 150;
  --p1x: 254;
  --p1y: 55;
  --p2x: 244;
  --p2y: 259;
  --p3x: 80;
  --p3y: 100;
}
div {
  position: absolute;
  user-select: none;
  pointer-events: none;
  top: calc(-16px + 1px * var(--q6y));
  left: calc(-16px + 1px * var(--q6x));
  font-size: 24px;
  animation-name: q1, q2, q3, q4, q5, q6, progress;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes q1 {
  from { --q1x: var(--p0x); --q1y: var(--p0y); }
  to { --q1x: var(--p1x); --q1y: var(--p1y); }
}
@keyframes q2 {
  from { --q2x: var(--p1x); --q2y: var(--p1y); }
  to { --q2x: var(--p2x); --q2y: var(--p2y); }
}
@keyframes q3 {
  from { --q3x: var(--p2x); --q3y: var(--p2y); }
  to { --q3x: var(--p3x); --q3y: var(--p3y); }
}
@keyframes q4 {
  from { --q4x: var(--q1x); --q4y: var(--q1y); }
  to { --q4x: var(--q2x); --q4y: var(--q2y); }
}
@keyframes q5 {
  from { --q5x: var(--q2x); --q5y: var(--q2y); }
  to { --q5x: var(--q3x); --q5y: var(--q3y); }
}
@keyframes q6 {
  from { --q6x: var(--q4x); --q6y: var(--q4y); }
  to { --q6x: var(--q5x); --q6y: var(--q5y); }
}
@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('input');

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 < 4; ++i) {
    for (const xy of ['x', 'y']) {
      const varName = 'p' + i.toString() + xy;
      vars[varName] = parseInt(rootStyle.getPropertyValue('--' + varName));
    }
  }
  for (let i = 1; i < 7; ++i) {
    for (const xy of ['x', 'y']) {
      const varName = 'q' + i.toString() + xy;
      vars[varName] = parseInt(divStyle.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.bezierCurveTo(vars.p1x, vars.p1y, vars.p2x, vars.p2y, vars.p3x, vars.p3y);
 ctx.stroke();
 ctx.restore();
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  const vars = getVars(); 
  
  drawLine(vars.p0x, vars.p0y, vars.p1x, vars.p1y, '#777');
  drawLine(vars.p2x, vars.p2y, vars.p3x, vars.p3y, '#777');
  
  if (showConstruction.checked) {
    drawLine(vars.p1x, vars.p1y, vars.p2x, vars.p2y, '#007');
    drawLine(vars.q1x, vars.q1y, vars.q2x, vars.q2y, '#007');
    drawLine(vars.q2x, vars.q2y, vars.q3x, vars.q3y, '#007');
    drawLine(vars.q4x, vars.q4y, vars.q5x, vars.q5y, '#007');
    for(let i = 1; i < 7; ++i) {
     drawPoint(vars['q' + i + 'x'], vars['q' + i + 'y'], '#777');
    }
  }
  
  drawBezier(vars);
  drawPoint(vars.p0x, vars.p0y, 'black');
  drawPoint(vars.p3x, vars.p3y, 'black');
  drawControlPoint(vars.p1x, vars.p1y);
  drawControlPoint(vars.p2x, vars.p2y);
  
  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();
  for(let i = 0; i < 4; ++i) {
    const pName = 'p' + i.toString();
    if (canDrag(mouseX, mouseY, vars[pName + 'x'], vars[pName + 'y'])) {
      dragging = pName;
      break;
    }
  }
});

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