JSFiddle - React, Tailwind, and code Playground

by BartekChom

HTML

<canvas id=canvas width=300 height=250>

JavaScript

w=25;
h=21;
scale=10;
ctx=document.getElementById('canvas').getContext('2d');

function random_range(r){
	return Math.floor(Math.random()*r);
}

imageObj=new Image();
imageObj.src='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
//imageObjMarker=new Image();
//imageObjMarker.src='http://www.web2generators.com/application/img/sprite-sample.png';

function draw_maze(){
	ctx.fillStyle='#cc0';
	ctx.clearRect(0,0,300,250);
	ctx.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,scale*w,scale*h);
	for(i=0; i<w; ++i){
		for(j=0; j<h; ++j){
			if(Z[j][i]){
				ctx.fillStyle='#c0c';
				ctx.fillRect(i*scale+scale*2/5,j*scale+scale*2/5,scale*1/5,scale*1/5);
				// left
				if(i>0&&Z[j][i-1])ctx.fillRect(i*scale,j*scale+scale*2/5,scale*2/5,scale*1/5);
				// top
				if(j>0&&Z[j-1][i])ctx.fillRect(i*scale+scale*2/5,j*scale,scale*1/5,scale*2/5);
				// right
				if(i<w-1&&Z[j][i+1])ctx.fillRect(i*scale+scale*3/5,j*scale+scale*2/5,scale*2/5,scale*1/5);
				// bottom
				if(j<h-1&&Z[j+1][i])ctx.fillRect(i*scale+scale*2/5,j*scale+scale*3/5,scale*1/5,scale*2/5);
			}
		}
	}
	//draw marker
	ctx.strokeStyle='#f30';
	ctx.beginPath();
	ctx.arc((col+0.5)*scale,(row+0.5)*scale,scale/3,0,Math.PI*2,true);
	ctx.stroke();
	ctx.strokeStyle='#00c';
	ctx.fillStyle='#00c';
	ctx.arc((col+0.5)*scale,(row+0.5)*scale,scale/1.5,0,Math.PI*2,true);
	ctx.stroke();
	//ctx.drawImage(imageObjMarker,92,158,54,64,col*scale,row*scale,scale,scale);
}

complexity=0.75;
density=0.75;
// Adjust complexity and density relative to maze size
complexity=Math.round(complexity*(5*(h+w)));
density=Math.round(density*(Math.floor(h/2)*Math.floor(w/2)));
// Build actual maze
Z=[];
for(i=0; i<h; ++i){
	Z[i]=[];
	for(j=0; j<w; ++j){
		v=0;
		// external wall
		if(i==0||j==0||i==h-1||j==w-1)v=1;
		// door to enter and exit
		if(i==0&&j==1||i==h-1&&j==w-2)v=0;
		Z[i][j]=v;
	}
}

for(i=0; i<density; ++i){
	x=random_range(Math.ceil(w/2))*2;
	y=random_range(Math.ceil(h/2))*2;
	Z[y][x]=1;
	for(j=0;...