JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
<script type="text/javascript">
var stage, s, dragged;
var c1, c2, c3, c4; // anchors for Cubic Bézier
function Start()
{
stage = new Stage("c");
s = new Sprite();
stage.addChild(s);
c1 = new Dot("A"); c2 = new Dot("B"); c3 = new Dot("C"); c4 = new Dot("D");
var ds = [c1, c2, c3, c4];
for(var i=0; i<ds.length; i++)
{
ds[i].x = 50+i*120; ds[i].y = 200-100*Math.sin(i*1.2);
ds[i].addEventListener(MouseEvent.MOUSE_DOWN, onMD);
s.addChild(ds[i]);
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMM);
stage.addEventListener(MouseEvent.MOUSE_UP, onMU);
redraw();
}
function onMD(e){dragged = e.target;}
function onMU(e){dragged = null; }
function onMM(e)
{
if(dragged == null) return;
dragged.x = stage.mouseX; dragged.y = stage.mouseY;
redraw();
}
function redraw()
{
with(s.graphics)
{
clear();
var r = getCurveBounds(c1.x, c1.y, c2.x, c2.y, c3.x, c3.y, c4.x, c4.y);
beginFill(0x00ff00, 0.2);
drawRect(r.x, r.y, r.width, r.height);
endFill();
lineStyle(2, 0x999999); // two "skeletons"
moveTo(c1.x, c1.y);
lineTo(c2.x, c2.y); lineTo(c3.x, c3.y); lineTo(c4.x, c4.y);
lineStyle(7, 0x00aaff);
moveTo(c1.x, c1.y);
cubicCurveTo(c2.x, c2.y, c3.x, c3.y, c4.x, c4.y);
}
}
function Dot(name)
{
Sprite.call(this); // inherits from Sprite
...