JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="shapeCreatorContainer">
</div>

CSS

#shapeCreatorContainer {
  background-color: #333;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

html,
body {
  padding: 0;
}

.shape{
  position:absolute;
  min-width:1px;
  min-height:1px;
  background:red;
}

JavaScript

window.addEventListener('load', function () {
  var shapeContainer = document.getElementById('shapeCreatorContainer');
  var mouseDown = false;//is the mouse down?
  var shapeInstance = false;//a shape is currently being manipulated
  var activeShape = false;//the current shape being manipulated
  var activeXY = [false, false];//store active X Y coordinates of shapes
  shapeContainer.addEventListener('mousedown', function () {
    mouseDown = true;
  });
  shapeContainer.addEventListener('mouseup', function () {
    mouseDown = false;
    shapeInstance = false;
    activeShape = false;
  });
  shapeContainer.addEventListener('mousemove', function (e) {
    if (mouseDown == true) {
      //user is dragging; create shape
      if(shapeInstance == true){
        //shape has been created; resize it according to drag
        activeShape.style.width = e.pageX - activeXY[1]+'px';
        activeShape.style.height = e.pageY - activeXY[0]+'px';
      }else{
        //create a shape
        shapeInstance = true;
        var newShape = document.createElement('div');
        newShape.className = 'shape';
        newShape.style.top = e.pageY+'px';
        newShape.style.left = e.pageX+'px';
        shapeContainer.appendChild(newShape);
        activeShape = newShape;
        activeXY[0] = e.pageY;
        activeXY[1] = e.pageX;
      }
    }
  });
});