JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="firstDivistion" class="division" style="float:right; width:15%;">Floor height(meter):
        <input type="number" id="floorHeight">
        <br>Floor width(meter):
        <input type="number" id="floorWidth">
        <br>
        <button onclick="setFloorWidthAndHeight()" id="floorWidthAndHeightButton">OK</button>
        <br>
        <button onclick="changeType(1)" id="rectroom" style="display:none">Rectangular room</button>
        <button onclick="changeType(2)" id="circroom" style="display:none">Circular room</button>
        <button onclick="changeType(5)" id="elevator" style="display:none">Elevator</button>
        <button onclick="changeType(6)" id="stairs" style="display:none">Stairs</button>
        <button onclick="changeType(7)" id="circhole" style="display:none">circular hole</button>
        <br>
        <button onclick="changeType(8)" id="recthole" style="display:none">rectangular hole</button>
        <br>
        <button onclick="changeType(9)" id="circcolumn" style="display:none">circular column</button>
        <br>
        <button onclick="changeType(10)" id="rectcolumn" style="display:none">rectangular column</button>
        <br>
        <button onclick="changeType(11)" id="beacon" style="display:none">Add Beacon</button>
        <br>
        <button onclick="save()" id="save" style="display:none">save</button>
        <br>
        <button onclick="clearCanvas()" id="clear" style="display:none">Clear</button>
        <br>
        <button onclick="changeType(12)" id="floor" style="display:none">Draw floor shape</button>
        <br>
        <button onclick="drawFloorShape()" id="drawFloorShape" style="display:none">Finish drawing floor shape</button>
        <br>
        <button onclick="deleteShape()" id="delete" style="display:none">Delete</button>
        <br>
        <input type="text" id="beaconId" placeholder="Beacon ID" style="display:none">
        <input type="number" id="beaconMajor" placeholder="Beacon Major"...

CSS

.division {
     height: 500px;
     border: 1px solid #000000;
     margin-left: 10px;
 }

JavaScript

< script >
var canvas;
var floorWidthPixel = 1100;
var floorHeightPixel = 600;
var floorWidthMeter = 700;
var floorHeightMeter = 500;
var pixelMeterRatio = undefined;

const NONE = 0;
const RECTANGULAR_ROOM = 1;
const CIRCULAR_ROOM = 2;
const ELEVATOR = 5;
const STAIRS = 6;
const CIRCULAR_HOLE = 7;
const RECTANGULAR_HOLE = 8;
const CIRCULAR_COLUMN = 9;
const RECTANGULAR_COLUMN = 10
const BEACON = 11;
const CORRIDOR = 12;
const MIN_DISTANCE = 10;

var shapeType = NONE;

var previousSource = undefined;
var currentSource = undefined;
var selectedBeacon = undefined;
var selectedRoom = undefined;

var floorPlanSVG = [];
var floorPlanJSONs = [];
var floorPlanAndroidJSONs = [];
var floorShapes = [];
var eachFloorPoints = [];

var startX = undefined;
var startY = undefined;
var floorPointsDots = [];
var floorPoints = [];
var floorPointsArray = [];
var floorStartPointX = floorWidthPixel;
var floorStartPointY = floorHeightPixel;
var floorTempStartX = undefined;
var floorTempStartY = undefined;
var beaconObjects = [];
var currentFloor = 0;
var floorShape = undefined;

var denemejson;

//change shape type to start drawing
function changeType(type) {
    if (type == RECTANGULAR_ROOM) {
        shapeType = RECTANGULAR_ROOM;
        document.getElementById('beaconId').style.display = "none";
        document.getElementById('beaconMajor').style.display = "none";
        document.getElementById('beaconMinor').style.display = "none";
        document.getElementById('changeBeaconId').style.display = "none";
        document.getElementById('roomName').style.display = "inline";
        document.getElementById('roomHeight').style.display = "inline";
        document.getElementById('roomWidth').style.display = "inline";
        document.getElementById('roomRadius').style.display = "none";
        document.getElementById('changeRoomName').style.display = "none";
    } else if (type == CIRCULAR_ROOM) {
        shapeType = CIRCULAR_ROOM;
       ...