JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

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).ready(function() {
	image = new Image();
	$(image).load(function() {
		setInterval(draw, 1000 / 60);
	});
	$(image).attr('src', 'http://media.giphy.com/media/NWb6sWXQQTqwg/giphy.gif');

	canvas = document.createElement('canvas');
	$(canvas).attr('width', 500);
	$(canvas).attr('height', 500);
	$('body').append(canvas);

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

	//
	for (var i = 0; i < 4; ++i) {
		var control = document.createElement('div');
		$(control).addClass('node');
		$('body').append(control);
		controls.push(control);
	}

	$(controls[0]).css('left', rand(25, 225));
	$(controls[0]).css('top', rand(25, 225));

	$(controls[1]).css('left', rand(250, 475));
	$(controls[1]).css('top', rand(25, 225));

	$(controls[2]).css('left', rand(250, 475));
	$(controls[2]).css('top', rand(250, 475));

	$(controls[3]).css('left', rand(25, 225));
	$(controls[3]).css('top', rand(250, 475));

	$('body').mousedown(function(e) {
		if ($(e.target).hasClass('node')) {
			var node = e.target;

			$('body').mousemove(function(e) {
				var x = e.pageX;
				var y = e.pageY;
				$(node).css('left', x);
				$(node).css('top', y);
				dirtyTriangles = true;
			});

			$('body').mouseup(function(e) {
				$('body').off( "mousemove" );
				$('body').off( "mouseup" );
			});
		}
	});
});

var draw = function() {
	context.clearRect(0,0,500,500);

	var render = function(wireframe, image, tri) {
		
		if (wireframe) {
			context.strokeStyle = "black";
			context.beginPath();
			context.moveTo(tri.p0.x, tri.p0.y);
			context.lineTo(tri.p1.x, tri.p1.y);
			context.lineTo(tri.p2.x, tri.p2.y);
			context.lineTo(tri.p0.x, tri.p0.y);
			context.stroke();
			context.closePath();
	    }

	    if (image) {
		    drawTriangle(context, image,
						 tri.p0.x, tri.p0.y,
						 tri.p1.x, tri.p1.y,
						 tri.p2.x,...