JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

var puzzle=[[-1,-1,-1,-1,1,2,-1],[2,2,-1,2,-1,2,-1],[3,1,-1,-1,3,2,-1],[-1,3,-1,1,-1,1,-1],[1,-1,1,-1,-1,-1,-1],[-1,3,-1,-1,-1,2,-1],[3,2,3,1,2,-1,3]];

var $canvas=$('#canvas');
var canvas=$canvas[0];
var g=canvas.getContext('2d');

var w=$canvas.width();
var h=$canvas.width();

var delta=50;
var size=10;

var sx=puzzle[0].length;
var sy=puzzle.length;

var ha=new Array(sy+1);
for(var y=0; y<=sy; y++){
    ha[y]=new Array(sx);
    for(var x=0; x<sx; x++)
        ha[y][x]=0;
}
var va=new Array(sy);
for(var y=0; y<sy; y++){
    va[y]=new Array(sx+1);
    for(var x=0; x<=sx; x++)
        va[y][x]=0;
}

function handle_mouse(e){
    var etype=(e.type=='mousedown'?1:(e.type=='mouseout'?-1:0));
    var mx=e.clientX, my=e.clientY;
    var x=(mx-size/2)/(delta+size), y=(my-size/2)/(delta+size);
    if(x<0) x=0; if(y<0) y=0;
    if(x>=sx) x=sx-0.1; if(y>=sy) y=sy-0.1;
    var dx=(x%1+1)%1, dy=(y%1+1)%1;
    var adx=(dx>0.5?1-dx:dx), ady=(dy>0.5?1-dy:dy);
    g.fillStyle="rgb(192,192,192)";
    var pa;
    if(adx<ady){
        pa=va; x=Math.round(x); y=Math.round(y-0.5);
    }else{
        pa=ha; x=Math.round(x-0.5); y=Math.round(y);
    }
    if(etype===-1)
        paint();
    else if(etype===1){
        var v=(e.which==1?1:2);
        if(pa[y][x]!==v)
            pa[y][x]=v;
        else
            pa[y][x]=0;
        e.preventDefault();
    }
    if(etype!==-1){
        paint();
        g.fillStyle=(pa[y][x]!==1?"rgba(0,128,0,0.4)":"rgba(255,128,128,0.4)");
        line(pa,x,y);
    }
}

$canvas.mousedown(handle_mouse).mouseover(handle_mouse).mousemove(handle_mouse).mouseout(handle_mouse);
$canvas.on('contextmenu',function(e){e.preventDefault()});

function line(pa,x,y){
    if(pa===ha)
        g.fillRect(size+(delta+size)*x,(delta+size)*y+1,delta,size-2);
    else if(pa===va)  
        g.fillRect((delta+size)*x+1,size+(delta+size)*y,size-2,delta);
}
function cross(pa,x,y){
    if(pa===ha)
        g.fillRect((delta+size)*(x+0.5),(delta+size)*y,size,size);
    else...