JSFiddle - React, Tailwind, and code Playground

CSS

body {
	background-color: #111;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.node {
	border-radius: 12px;
	width: 24px;
	height: 24px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: magenta;
}

canvas {
	background-color: white;
	width: 500px;
	height: 500px;
}

JavaScript

var controls = []
var canvas
var context
var image
var triangles = []
var dirtyTriangles = true

var rand = function (s, e) {
  return Math.random() * (e - s) + s
}

// dom ready
document.addEventListener("DOMContentLoaded", function () {
     image = new Image();
    image.onload = function () {
        setInterval(draw, 1000 / 60);
    };
    image.src = "https://cdn.pixabay.com/photo/2021/12/23/03/58/da-guojing-6888603_1280.jpg";

     canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 500;
    document.body.appendChild(canvas);

     context = canvas.getContext("2d");

     controls = [];
    for (let i = 0; i < 4; ++i) {
        const control = document.createElement("div");
        control.classList.add("node");
        document.body.appendChild(control);
        controls.push(control);
    }

    controls[0].style.left = "25px";
    controls[0].style.top = "25px";

    controls[1].style.left = "250px";
    controls[1].style.top = "25px";

    controls[2].style.left = "250px";
    controls[2].style.top = "250px";

    controls[3].style.left = "25px";
    controls[3].style.top = "250px";

    document.body.addEventListener("mousedown", function (e) {
        if (e.target.classList.contains("node")) {
            const node = e.target;

            const mouseMoveHandler = function (e) {
                const x = e.pageX + "px";
                const y = e.pageY + "px";
                node.style.left = x;
                node.style.top = y;
                dirtyTriangles = true;
            };

            const mouseUpHandler = function () {
                document.body.removeEventListener("mousemove", mouseMoveHandler);
                document.body.removeEventListener("mouseup", mouseUpHandler);
            };

            document.body.addEventListener("mousemove", mouseMoveHandler);
            document.body.addEventListener("mouseup", mouseUpHandler);
        }
    });
});

var draw = function () {
 ...