JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<script src="http://qiao.github.io/PathFinding.js/visual/lib/pathfinding-browser.min.js"></script>
<img id="img" src="/img/initializing.png" />
<canvas id="imgcanvas"></canvas>
<canvas id="overlaycanvas"></canvas>
<button id="search">Search</button>

CSS

canvas {
    position: absolute;
    top: 18px;
    left:18px;
}

img {
    visibility: hidden
}

JavaScript

var ctx = overlaycanvas.getContext('2d'), ctx0=imgcanvas.getContext('2d'), width, height;
start = [50,50], end = [150, 120], im = [3,3];
width = overlaycanvas.width = imgcanvas.width = img.width;
height = overlaycanvas.height = imgcanvas.height = img.height;
ctx0.drawImage(img, im[0], im[1], img.width, img.height, 0, 0, img.width, img.height);


var pts=[start, end, im], dragging=[false, false, false], imDragOrigin;
overlaycanvas.onmousedown = function(ev){
    for (var i=0;i<2;i++){
        if (pts[i][0]-5<ev.offsetX && ev.offsetX<pts[i][0]+5 && pts[i][1]-5<ev.offsetY && ev.offsetY<pts[i][1]+5) dragging[i]= true;
    }
    if (!dragging[0] && !dragging[1]) {
        dragging[2]=true;
        imDragOrigin = [ev.offsetX, ev.offsetY];
    }
}
overlaycanvas.onmouseup = function(ev){
    dragging=[false,false,false];
}

overlaycanvas.onmousemove = function(ev){
    for (var i=0;i<dragging.length;i++){
        if (dragging[i] && (ev.which || ev.button)==1){
            if (i<2) {pts[i][0]=ev.offsetX; pts[i][1] = ev.offsetY;}
            else {pts[i][0]+=imDragOrigin[0]-ev.offsetX; pts[i][1]+=imDragOrigin[1]-ev.offsetY;imDragOrigin = [ev.offsetX, ev.offsetY];}
            ctx.clearRect(0, 0, imgcanvas.width, imgcanvas.height);
            ctx0.clearRect(0, 0, imgcanvas.width, imgcanvas.height);
            ctx0.drawImage(img, im[0], im[1], img.width, img.height, 0, 0, img.width, img.height);          
            line(ctx, "green", start[0]-5, start[1], start[0]+5, start[1])
            line(ctx, "green", start[0], start[1]-5, start[0], start[1]+5)
            line(ctx, "red", end[0]-5, end[1], end[0]+5, end[1])
            line(ctx, "red", end[0], end[1]-5, end[0], end[1]+5)
        }
    }
}


/*for (var i=0;i<matrix.length;i++){
    for (var j=0;j<matrix[i].length;j++){
        ctx.fillStyle=matrix[i][j]==1? "black" : "white";
        ctx.fillRect(j,i,1,1);
    }
}*/
line(ctx, "green", start[0]-5, start[1], start[0]+5, start[1])
line(ctx, "green", start[0],...