JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="border:1px solid black;" width="500" height="500">Please use a browser that supports the canvas element and make sure your Javascript is working properly.</canvas>
<br>
<span id="testing"></span>
<select id="objSel">
    <option>Square</option>
    <option>Rectangle</option>
    <option>Circle</option>
    <option>Oval</option>
</select>

JavaScript

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

var mx=300;
var my=300;
var currentObject = {};

document.onmousemove = function(e){
	mx=e.pageX-8;
    my=e.pageY-8;
}
document.onmousedown = function(e){
    var obj = document.getElementById("objSel").value;
    currentObject.type=obj;
    if(obj=="Square"){
    	currentObject.x=e.pageX-8;
    	currentObject.y=e.pageY-8;
    }
}
document.onmouseup = function(e){
	mx=e.pageX-8;
    my=e.pageY-8;
    if(currentObject.type=="Square"){
    	currentObject.length=mx-currentObject.x;
    	currentObject.height=my-currentObject.y;
    }
    objects.push(currentObject);
    currentObject={};
}

var objects = [];

function render(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.beginPath();
    ctx.moveTo(mx-5,my);
    ctx.lineTo(mx+5,my);
    ctx.moveTo(mx,my-5);
    ctx.lineTo(mx,my+5);
    ctx.strokeStyle="black";
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.closePath();
    if(currentObject.type=="Square"){
    	ctx.beginPath();
        ctx.rect(currentObject.x,currentObject.y,mx-currentObject.x,my-currentObject.y);
        ctx.stroke();
    }
	//for(var i=0;i<objects.length;i++)
}
setInterval(render,5);
render();