JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='password' width='251px' height='251px' onmousedown='down()' onmouseout='up()' onmouseup='up()' onmousemove='move();'></canvas>
<br/>
<button onclick='check();'>check</button>
<button onclick='clearPassword()'>clear</button>
<br/>
<textarea id='passwordInput'></textarea>
<script>load();</script>

CSS

#password{
    width:251px;
    height:251px;
    background:#ddd;
    cursor:crosshair;
}

textarea{
    width:250px;
    height:150px;
}

JavaScript

/* draw password */

letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
var drawLine = [];
mouseDown = false;
squareBefore = false;

function load() {
    ctx = document.getElementById('password').getContext('2d');
    drawGrid();
}

function down() {
    mouseDown = true;
    drawLine[drawLine.length] = [];
    move();
}

function move() {
    if (mouseDown) {
        square = letters[Math.min(Math.floor(event.offsetX / 25), 9)] + Math.min(Math.floor(event.offsetY / 25), 9);
        if (square !== squareBefore) {
            if (squareBefore !== false) {
                document.getElementById('passwordInput').value += '>';
            }
            document.getElementById('passwordInput').value += square;
            squareBefore = square;
        }
        drawLine[drawLine.length - 1][drawLine[drawLine.length - 1].length] = [event.offsetX, event.offsetY];
    }
    updateGridDraw();
}

function up() {
    if (mouseDown) {
        document.getElementById('passwordInput').value += ';';
        mouseDown = false;
        squareBefore = false;
        move();
    }
}

function clearPassword() {
    document.getElementById('passwordInput').value = '';
    drawLine = [];
    updateGridDraw();
}

function updateGridDraw() {
    ctx.clearRect(0, 0, 251, 251);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#09f';
    if (document.getElementById('passwordInput').value == "a8>a9>b9;i9>j9>j8;j1>j0>i0;b0>a0>a1;e4>e5>f5>f4>e4;") {
        ctx.strokeStyle = '#0f0';
    }
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    for (i in drawLine) {
        ctx.beginPath();
        ctx.moveTo(drawLine[i][0][0], drawLine[i][0][1] - 1);
        for (j in drawLine[i]) {
            ctx.lineTo(drawLine[i][j][0], drawLine[i][j][1]);
        }
        ctx.stroke();
    }
    drawGrid();
}

function drawGrid() {
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#999';
    ctx.beginPath();
    for (i = 0; i <= 10; i++) {
        ctx.moveTo(i * 25 + .5, 0);
       ...