JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<canvas id="canvas" style="background-color:#f00"></canvas>

JavaScript

/* 

Original code : Stefan Haustein
https://jsfiddle.net/stefanhaustein/orpenu8s/62/embedded/result/

*/

var urlLandCoverMerged = "https://cdn.pbrd.co/images/HAXMQhm.png"
var img = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var dijkstra = null;
var run = 0;
var currentY = 0;
var yDone = -1;
var image = null;
var imageData = null;
var imageGraph = null;
var distinct = {};

var costs = {
  272: 1,
  317: 8,
  357: 10,
  404: 1,
  406: 5,
  430: 3,
  447: 8,
  470: 10,
  489: 2,
  765: 11
};


fetch(urlLandCoverMerged).then(function(response) {
  if (response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(data) {
  var img = new Image();
  img.onload = function() {
    image = img;
    canvas.width = img.width;
    canvas.height = img.height;
    convertToSw();
    distinct;
    debugger;

  };
  img.src = URL.createObjectURL(data);
}).catch(function(error) {
  alert('Error whilst fetching: ', error.message);
});

canvas.onclick = function(e) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  currentY = 0;
  if (yDone == -1) {
    start(x, y);
  } else {
    showPath(x, y);
  }
}

function convertToSw() {
  var total;
  ctx.drawImage(image, 0, 0);
  imageData = ctx.getImageData(0, 0, image.width, image.height);
  var data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    total = data[i] + data[i + 1] + data[i + 2];
    distinct[total] = true;
    data[i] = data[i + 1] = data[i + 2] = total / 3;
  }
  ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
}

function start(x, y) {
  imageGraph = new ImageGraph(imageData);
  dijkstra = new Dijkstra(imageGraph, {
    x: x,
    y: y
  });
  step();
}

function showPath(x, y) {
  var data = imageData.data;
  var min = 9e9;
  for (var j = 0; j < 10000; j++) {
    var newX = -1;
    var newY = -1;
    for (var dy = -1; dy < 2; dy++) {
      var row...