JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

body {
    padding:0;
    margin:0;
}
canvas:hover {
    cursor:crosshair;
}

JavaScript

var backgroundColor = '#FFF';
var shapePreviewColor = '#999';
var shapeColor = '#000';
var mouseDown = false;
var pointStart = null;
var pointEnd = null;
var points = [];

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var W = window.innerWidth;
var H = window.innerHeight;

canvas.width = W;
canvas.height = H;

setInterval(draw,33);

//Mouse event
canvas.onmousedown = function(e) {
    
    mouseDown = true;
    pointStart = {
        x: e.clientX,
        y: e.clientY
    };
}
canvas.onmousemove = function(e) {
    
    if(mouseDown) {
        
        pointEnd = {
            x: e.clientX,
            y: e.clientY
        };
    }
}
canvas.onmouseup = function(e) {
    
    mouseDown = false;
    pointEnd = {
        x: e.clientX,
        y: e.clientY
    };
    
    points.push({
        start: pointStart,
        end: pointEnd
    });
    
    pointStart = pointEnd = null;
}

//Draw
function draw()
{
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0,0,W,H);
    
    //Draw preview square
    if(mouseDown && pointStart != null && pointEnd != null)
    {
        var width = pointEnd.x - pointStart.x,
            height = pointEnd.y - pointStart.y;
        
        ctx.strokeStyle = shapePreviewColor;
        ctx.strokeRect(pointStart.x, pointStart.y, width, height);
    }
    
    //Draw existing points
    for(var i in points)
    {
        var point = points[i],
            width = point.end.x - point.start.x,
            height = point.end.y - point.start.y;
        
        ctx.strokeStyle = shapeColor;
        ctx.strokeRect(point.start.x, point.start.y, width, height);
    }
    
}