JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div id="drawing"></div>
<canvas id="canvas"></canvas>

CSS

#drawing, #canvas {
    width: 300px;
    height: 150px;
    margin-bottom: 10px;
    border: solid 1px #CCC;
    position: relative;
}
.pixel {
    width: 1px;
    height: 1px;
    background: #000;
    position: absolute;
}
}

JavaScript

$(function() {
    var mouseIsDown = false;
    $('#drawing').mousedown(function(e) {
        mouseIsDown = true;
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(e.offsetX, e.offsetY);
    }).mouseup(function(e) {
        mouseIsDown = false;
    }).mousemove(function(e) {
        if (mouseIsDown) {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
        }
    });
});