JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<!--<input type="radio" name="brush" id="source" value="source">Source</input>
<input type="radio" name="brush" id="destination" value="destination">Destination</input>
<input type="radio" name="brush" id="obstruction" value="obstruction" checked>Obstruction</input>-->
<button id="path">Find Path</button>
<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var pathButton = document.getElementById('path');

var mouseDown = false;
var lastPosX = 0;
var lastPosY = 0;
var currPosX = 0;
var currPosY = 0;

var sourceX = 100;
var sourceY = 300;

var destinationX = 500;
var destinationY = 300;

function bestfirstsearch(grid) {
    var currentPath = [{x: sourceX, y: sourceY}],
        pathStack = [{x: sourceX, y: sourceY}];
    
    do {
        var currPos = pathStack.pop();
        var currOffset = (x + y * canvas.width) * 4;
        var offsets = [];
        for(var x = -1; x < 1; x++) {
            for(var y = -1; y < 1; y++) {
                if (!x && !y) continue;
                var localOffset = currOffset + x + y * canvas.width;
                
                var dist = distance(currPos.x + x, currPos.y + y, destinationX, destinationY);
            }
        }
    } while(!found);
}

context.fillStyle = "rgb(0,255,0)";
context.fillRect(sourceX-1, sourceY-1, 3, 3);

context.fillStyle = "rgb(0,0,255)";
context.fillRect(destinationX - 1, destinationY - 1, 3, 3);

function drawObstruction() {
    context.beginPath();
    context.strokeStyle = "rgba(255,0,0,1)";
    context.moveTo(lastPosX, lastPosY);
    context.lineTo(currPosX, currPosY);
    context.stroke();
    return;
}

window.addEventListener('mousedown', function(e){
    if (e.button === 0) mouseDown = true;
    lastPosX = e.offsetX;
    lastPosY = e.offsetY;
});

window.addEventListener('mouseup', function(e){
    if (e.button === 0) mouseDown = false;
    currPosX = e.offsetX;
    currPosY = e.offsetY;
    drawObstruction();
});

canvas.addEventListener('mousemove', function(e){
    if (mouseDown) {
        currPosX = e.offsetX;
        currPosY = e.offsetY;
        drawObstruction();
        lastPosX = currPosX;
        lastPosY = currPosY;
    }
});

pathButton.addEventListener('click', function(e){
    var imageData = context.getImageData(0, 0, canvas.width,...