JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

#canvas {
  background-color: yellow;
}

JavaScript

var lineOffset = 4;
var anchrSize = 2;

var mousedown = false;
var clickedArea = {box: -1, pos:'o'};
var x1 = -1;
var y1 = -1;
var x2 = -1;
var y2 = -1;

var boxes = [];
var tmpBox = null;

document.getElementById("canvas").onmousedown = function(e) {
  mousedown = true;
  clickedArea = findCurrentArea(e.offsetX, e.offsetY);
  x1 = e.offsetX;
  y1 = e.offsetY;
  x2 = e.offsetX;
  y2 = e.offsetY;
};
document.getElementById("canvas").onmouseup = function(e) {
	if (clickedArea.box == -1 && tmpBox != null) {
  	boxes.push(tmpBox);
  } else if (clickedArea.box != -1) {
  	var selectedBox = boxes[clickedArea.box];
    if (selectedBox.x1 > selectedBox.x2) {
    	var previousX1 = selectedBox.x1;
      selectedBox.x1 = selectedBox.x2;
      selectedBox.x2 = previousX1;
    }
    if (selectedBox.y1 > selectedBox.y2) {
    	var previousY1 = selectedBox.y1;
      selectedBox.y1 = selectedBox.y2;
      selectedBox.y2 = previousY1;
    }
  }
  clickedArea = {box: -1, pos:'o'};
  tmpBox = null;
  mousedown = false;
  console.log(boxes);
};
document.getElementById("canvas").onmouseout = function(e) {
	if (clickedArea.box != -1) {
  	var selectedBox = boxes[clickedArea.box];
    if (selectedBox.x1 > selectedBox.x2) {
    	var previousX1 = selectedBox.x1;
      selectedBox.x1 = selectedBox.x2;
      selectedBox.x2 > previousX1;
    }
    if (selectedBox.y1 > selectedBox.y2) {
    	var previousY1 = selectedBox.y1;
      selectedBox.y1 = selectedBox.y2;
      selectedBox.y2 > previousY1;
    }
  }
  mousedown = false;
  clickedArea = {box: -1, pos:'o'};
  tmpBox = null;
};
document.getElementById("canvas").onmousemove = function(e) {
  if (mousedown && clickedArea.box == -1) {
    x2 = e.offsetX;
    y2 = e.offsetY;
    redraw();
  } else if (mousedown && clickedArea.box != -1) {
    x2 = e.offsetX;
    y2 = e.offsetY;
    xOffset = x2 - x1;
    yOffset = y2 - y1;
    x1 = x2;
    y1 = y2;

    if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tl' ||
        clickedArea.pos...