JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    #c {
        width: 100%;
        height: 100%;
    }
</style>
<canvas id="c" width="64" height="64"></canvas>

JavaScript

var A = [
"+--+  +-+ +-+  +++   +---+   +-+  +-+-+  +-++-+",
"|SO|  | | | |  +++   |+-+|   | |  | | |  | || |",
"+--+  +-+-+-+  +++   ||+||   +-+  +-+-+  +-++-+",
"        | |          |+-+|   | |",
"      +-+-+-+        +---+   +-+",
"      | | | |",
"      +-+ +-+",
"",
"",
"++ +-+ ++     +-+   +- + +--+ +--+ +--+",
"|| +-+ ++   +-+-+   |  | |  | |    |  |",
"++          | |     |  | |  | |  |    |",
"            +-+     +--+ + -+ +--+ +--+"
    ];

var ctx = $("#c")[0].getContext("2d");

function rand() { return Math.floor(Math.random() * 256); }

// Redefine alert function
function alert(coords) {
    ctx.fillStyle = "rgb(" + [rand(), rand(), rand()] + ")";
    ctx.fillRect(coords[0], coords[1], coords[2], coords[3]);
}

for(y=A.length,r=/\+-*\+/g;--y;)for(;m=r(A[y]);){for(w=m[0].length,z=y;A[--z][x=m.index]+A[z][x+w-1]=="||";);/^\+-*\+$/(A[z].substr(x,w))&&alert([x,z,w,y-z+1])}