JSFiddle - React, Tailwind, and code Playground
by BartekChom
HTML
<canvas id=canvas width=300 height=250>JavaScript
w=25
W=24
V=23
h=21
H=20
s=10
S=100
C=document.getElementById('canvas').getContext('2d')
function R(e){return Math.floor(Math.random()*e)}function L(){C.clearRect(0,0,300,250)}function f(e){C.fillStyle=e}function A(e){C.arc(c*s+5,r*s+5,s/e,0,Math.PI*2,1)}I=new Image()
I.src='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
function D(){f('#cc0')
L()
C.drawImage(I,0,0,I.width,I.height,0,0,s*w,s*h)
for(i=0;i<w;++i){for(j=0;j<h;++j){if(Z[j][i]){f('#c0c')
C.fillRect(i*s+4,j*s+4,2,2)
if(i>0&&Z[j][i-1])C.fillRect(i*s,j*s+4,4,2)
if(j>0&&Z[j-1][i])C.fillRect(i*s+4,j*s,2,4)
if(i<W&&Z[j][i+1])C.fillRect(i*s+6,j*s+4,4,2)
if(j<H&&Z[j+1][i])C.fillRect(i*s+4,j*s+6,2,4)}}}C.strokeStyle='#f30'
C.beginPath()
A(3)
C.stroke()
a='#00c'
C.strokeStyle=a
f(a)
A(1.5)
C.stroke()}Z=[]
for(i=0;i<h;++i){Z[i]=[]
for(j=0;j<w;++j){v=0
if((i==0||j==0||i==H||j==W)&&!(i==0&&j==1||i==H&&j==V))v=1
Z[i][j]=v}}for(i=0;i<90;++i){x=R(13)*2
y=R(11)*2
Z[y][x]=1
for(j=0;j<173;++j){n=[]
if(x>1)n.push({y:y,x:x-2})
if(x<V)n.push({y:y,x:x+2})
if(y>1)n.push({y:y-2,x:x})
if(y<19)n.push({y:y+2,x:x})
N=n.length
if(N){p=R(N)
Y=n[p].y
X=n[p].x
if(Z[Y][X]===0){Z[Y][X]=1
Z[(y+Y)/2][(x+X)/2]=1
x=X
y=Y}}}}r=0
c=1
document.onkeydown=function(e){switch((e===null?window.event:e).keyCode){case 37:if(c>0&&!Z[r][c-1])--c
break
case 38:if(r>0&&!Z[r-1][c])--r
break
case 39:if(c<W&&!Z[r][c+1])++c
break
case 40:if(r<H&&!Z[r+1][c])++r}D()
if(r==H&&c==V){document.onkeydown=null
f('#fff')
L()
f('#00f')
C.font="bold 16px Arial"
C.fillText("Done, time: "+(new Date().getTime()-t)/s/S+" s",S,S)}}
D()
t=new Date().getTime()