JSFiddle - React, Tailwind, and code Playground

by wsmithrill

HTML

<input type="button" id="togglePathing" value="Toggle Path Editing"/>
<input type="text" id="textText" value="Toggle Path Editing"/>
<canvas id="c" style="border: 1px solid green; width: 100%; height: 500px" ></canvas>

JavaScript

var addingToPath = false;
var arrayOfPoints = [];
var arrayOfXCoords = [];
var arrayOfYCoords = [];

var canvas = $("#c").get(0);
var c2 = canvas.getContext('2d');
var currentlyHighlightedPoint = null;
var dragging = false;

$("#togglePathing").bind("click", function() {
    if (addingToPath) {
        $("#c").unbind("click");
        $("#c").unbind("mousemove");
        $("#c").unbind("mousedown");
        addingToPath = false;
        redrawCanvas();
        positionText();
    }
    else {
        $("#c").bind("click", function(e) {
            if (!dragging) {
                arrayOfPoints[arrayOfPoints.length] = {
                    x: e.offsetX,
                    y: e.offsetY
                };
                redrawCanvas();
            }
            else {
                dragging = false;
            }
        });
        $("#c").bind("mousedown", function(e) {
            var foundPoint = false;
            for (var i in arrayOfPoints) {
                if (Math.abs(e.offsetX - arrayOfPoints[i].x) <= 5 && Math.abs(e.offsetY - arrayOfPoints[i].y) <= 5) {
                    currentlyHighlightedPoint = arrayOfPoints[i];
                    dragging = true;
                }
            }
        });
        $("#c").bind("mousemove", function(e) {
            var foundPoint = false;
            if (dragging) {
                currentlyHighlightedPoint.x = e.offsetX;
                currentlyHighlightedPoint.y = e.offsetY;
                redrawCanvas();
            }
            for (var i in arrayOfPoints) {
                if (Math.abs(e.offsetX - arrayOfPoints[i].x) <= 5 && Math.abs(e.offsetY - arrayOfPoints[i].y) <= 5) {

                    currentlyHighlightedPoint = arrayOfPoints[i];
                    redrawCanvas();
                    foundPoint = true;
                }
            }
            if (!foundPoint) {
                redrawCanvas();
                currentlyHighlightedPoint = null;
            }
        });
        addingToPath...