JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Draw a Rectangle</h1>
  <form id="areaform">
    <label for="wid">Width:</label>
    <input id="wid" type="number">
    <label for="hgt">Height:</label>
    <input id="hgt" type="number">
    <br/>
    <label for="area1">Area:</label>
    <output id="area"></output>
    <br/>
    <label for="perimeter1">Perimeter:</label>
    <output id="perim"></output>
    <br/>
    <button onclick="getarea()" type="button">Get Area</button>
  </form>
	
	<div id="drawRectangle">
	<canvas id="rectCanvas"  width=500 height=500></canvas>
	</div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  padding: 20px 12px 10px 20px;
}

#areaform {
    width: 200px;
    font-size: 1em;
	float: left;
	padding-right: 80px;
}

h1 {
  font-size: 2em;
}

p {
  margin: 20px 0;
}

label{
    display: block;
    margin: 15px 0px 0px 0px;
    font-weight: 600;
    color: #1C2238;
}
label > span{
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}

input {
    width: 100%;
}

input {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
    margin: 10px 0;
}
input:focus{
    border: 1px solid #0C0;
}

button {
    border: none;
    padding: 8px 15px 8px 15px;
    background: #88EF5E;
    color: #1C2238;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    margin: 15px 0;
    font-size: 1em;
}
button:hover{
    background: #EA7B00;
    color: #fff;
}

#drawRectangle {
	float: left;
}

canvas{border:5px solid black;}

JavaScript

var canvas, context, startX, endX, startY, endY;
var mouseClicked = 0;

function getarea() {
	var wid = document.getElementById('wid').value;
	wid = parseFloat(wid);
	var hgt = document.getElementById('hgt').value;
	hgt = parseFloat(hgt);
	var area = wid * hgt;
	var perim = (wid * 2) + (hgt * 2);
	document.getElementById('area').innerHTML = area;
	document.getElementById('perim').innerHTML = perim;
}


function mouseUp(e) {
    if (mouseClicked  !== 0) {
		mouseClicked = 0;
        var pos = getMousePos(canvas, e);
        endX = pos.x;
        endY = pos.y;
        drawRectangle(); 
    }
}

function mouseDown(e) {
    mouseClicked = 1;
    var pos = getMousePos(canvas, e);
    startX = endX = pos.x;
    startY = endY = pos.y;
    drawRectangle();
}

function mouseXY(e) {
    if (mouseClicked  !== 0) {
        var pos = getMousePos(canvas, e);
        endX = pos.x;
        endY = pos.y;
        drawRectangle();
    }
}

function drawRectangle() {
   
    var width = endX - startX;
    var height = endY - startY;
    var offsetX = (width > 0);
    var offsetY = (height > 0);
	
	
	document.getElementById("wid").value = width;
	document.getElementById("hgt").value = height;
	
    context.clearRect(0, 0, canvas.width, canvas.height);
               
    context.beginPath();
    context.rect(startX + offsetX, startY + offsetY, width, height);
    context.fillStyle = "#88EF5E";
    context.fill();

}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
	
}

function init() {
    canvas = document.getElementById("rectCanvas");
    context = canvas.getContext("2d");
    canvas.addEventListener("mousedown", mouseDown);
    canvas.addEventListener("mousemove", mouseXY);
    canvas.addEventListener("mouseup", mouseUp);
}

init();