JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="e1"></canvas>
<canvas id="e2" style="display:none;"></canvas>
<canvas id="e3"></canvas>
<canvas id="e4"></canvas>

JavaScript

(function(){
  var textures = document.querySelector('#e1');
  var ctx = textures.getContext('2d');
  var tcount = 8;

  textures.width = tcount * 100;
  textures.height = 100;

  function rcolor() {
    return '#'+(Math.floor(Math.random()*(0xffffff-0x100000))+0x100000).toString(16);
  }

  for (var i=0; i<tcount; ++i) {
    var g = Math.random() > .5
      ? ctx.createRadialGradient(i*100+50, 50, 0, i*100+50, 50, 100)
      : ctx.createLinearGradient(i*100, 0, i*100+100, 100);
    g.addColorStop(0, rcolor());
    g.addColorStop(1, rcolor());
    ctx.fillStyle = g;
    ctx.fillRect(i*100, 0, 100, 100);
  }

  var map = window.map = [
    'xxxxxxxxxxxxxxx',
    'x      x  x   x',
    'x  xx xxx   x x',
    'x         x   x',
    'xxxxxxxxxxxxxxx',
  ].join('').split('').map(function(s){
      // spaces are open, xes are a random texture
      if (s === ' ') return 0;
      return 1+Math.floor(Math.random()*tcount);
    });

  var width = 15;
  var height = 5;
  var unit = 50;
  var canvas = document.querySelector('#e2');
  var ctx2 = canvas.getContext('2d');
  canvas.width = width*unit;
  canvas.height = height*unit;

  for (var x=0; x<width; ++x) {
    for (var y=0; y<height; ++y) {
      if (map[y*width+x]) {
        ctx2.drawImage(textures, (map[y*width+x]-1)*100, 0, 100, 100, x*unit, y*unit, unit, unit);
      }
    }
  }
})();

(function() {
  var textures = document.querySelector('#e1');
  var minibg = document.querySelector('#e2');
  var mini = document.querySelector('#e3');
  var mctx = mini.getContext('2d');
  var canvas = document.querySelector('#e4');
  var ctx = canvas.getContext('2d');

  mini.width = minibg.width;
  mini.height = minibg.height;

  canvas.width = 500;
  canvas.height = 200;
  canvas.style.border = '1px solid black';

  function cast(px, py, angle) {
    if (px < 0 || px > width || py < 0 || py > height || map[Math.floor(px) + Math.floor(py) * width]) {
      return {x: Math.floor(px), y: Math.floor(py), _x: px, _y:py};
    }

    //...