JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>
<p>Brush Thickness:
    <p>
        <input id="input" value='3'></input>

CSS

input {
    position: absolute;
    top: 0px;
    left: 120px;
}
body {
    font-family: Helvetica Neue, Sans-Serif;
    font-weight: 100;
    font-size: 12pt;
}
p {
    position: absolute;
    top: 0px;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
opacity = 1;
color = 'orange';
$(document).mousemove(function (e) {
    var brush_thickness = $("#input").val();
    $(document).mousedown(function () {
        mousedown = true;
    });
    $(document).mouseup(function () {
        mousedown = false;
    });
    $(document).keypress(function (e) {
        if (e.which === 13 || e.keyCode === 13) {
            if (color === 'orange') {
                color = 'white';
            } else {
                color = 'orange';
            }
        }
    });
    if (mousedown === true) {
        context.beginPath();
        context.rect(e.pageX - 10, e.pageY - 10, brush_thickness, brush_thickness);
        context.fillStyle = color;
        context.fill();
    }
});