JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.3/processing.min.js"></script>
<p>
<button onClick="Processing.instances[0].maze()">Generate</button>
<br />
<canvas id="mycanvas"></canvas>
</p>
<script type="text/processing" data-processing-target="mycanvas">
g = 
[[2,4,14,10],
[5,10,3,3],
[2,3,1,3],
[5,13,12,9]];
void setup() {
    sideLength = 201;
    size(sideLength, sideLength);
    background(255);  
}
void maze() {
    background(255);
    rows = 4;
    cols = rows;
    step = (width-1)/rows;

    stroke(137, 194, 148, 50);
    for(int i=0; i<=width-1;) {
        line(i, 0, i, width-1);
        line(0, i, width-1, i);
        i+=step;
    }

    stroke(0);
    line(0, 0, width, 0);
    line(0, 0, 0, width);
    for(int i=0; i<=rows-1; i++) {
        for(int j=0; j<=rows-1; j++) {

            if((g[i][j] & 2) == 0) {
                line(step*j, step*(i+1), step*(j+1), step*(i+1));
            }
            if((g[i][j] & 4) == 0) {
                line(step*(j+1), step*i, step*(j+1), step*(i+1));
            }
        }
    }
}
</script>