JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="map" width="1024" height="1024" ></canvas>

JavaScript

var random = new RNG(new Date().getTime()),
mapsize = 250,
maxheight = 250,
minheight = 50,
altitude = 25,
scale = mapsize/(maxheight-minheight)+1;

function RNG(seed) {
    //Standard PRNG values
    var m = 0x100000000, a = 1103515245, c = 12345, state = seed;
    
    //This goes to the next value in the "seed"
    this.nextInt = function() {
        state = (a * state + c) % m;
        return state;
    }
        
    //This returns the value from each position, usually something like: 0.10751..., then calls the next value with nextInt
    this.nextFloat = function() { return this.nextInt()/ (m - 1); }
    
}

//Let's set up all the tiles, and make them set to 0 to start (they need values so we can subdivide from them)
tile = [];
for(var x=0; x < mapsize+1; x++) {
    tile[x] = tile[x] || {};
    for(var y=0; y < mapsize+1; y++) {
        //Give a border of 13 deep water tiles (so player doesn't ever see outside border
        if (x < 13 || y < 13 || x > mapsize-13 || y > mapsize-13) {
            tile[x][y] = -1;
        } else {
            tile[x][y] = 0;
        }
    }
}

//We need to define the step to the size of the map so that we can generate every 2nd tile, we will use subdivision to find the rest
var step = mapsize;

while(step > 1) {
    for(var x=0; x < mapsize; x+=step) {
        for(var y=0; y < mapsize; y+=step) {          
            subdivide(x,y,x+step,y+step); 
        }
    }
    step = Math.round(step*0.5);
}

//Do some magic shit!, skip midpoints if the sources have -1 (water edges)
function subdivide(x0, y0, x1, y1) {
    var xn = Math.round((x0+x1)*0.5), yn = Math.round((y0+y1)*0.5);
    
    if (tile[x0][y0] != -1 && tile[x1][y0] != -1) {
        tile[xn][y0] = getheight(tile[x0][y0], tile[x1][y0], x1-x0);
    }
    
    if (tile[x0][y0] != -1 && tile[x0][y1] != -1) {
        tile[x0][yn] = getheight(tile[x0][y0], tile[x0][y1], y1-y0);
    }
    
    if (tile[x1][y0] != -1 && tile[x1][y1] != -1) {
        tile[x1][yn] =...