Drag to draw polygons

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<div id="wrapper">
	<canvas id="my-canvas"></canvas>
	<button id="draw-poly">Draw Polygon</button>
	<input type="number" id="change-size"
JavaScript + No-Library (pure JS)  value="0" />
</div>

CSS

button {
	border: 0 none;
	background: #2ecc70;
	border-radius: 5px;
	cursor: pointer;
	color: #fff;
	box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
	text-transform: uppercase;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	margin: 10px auto;
	outline: 0 none;
}

input {
	border: 1px solid #ddd;
	box-shadow: none;
	padding: 11px;
	font-size: 13px;
	border-radius: 5px;
	margin-left: 10px;
	max-width: 50px;
	outline: 0 none !important;
}

JavaScript

var canvas = new fabric.Canvas();
var el = document.getElementById('my-canvas');
var drawPoly = document.getElementById('draw-poly');
var changeSize = document.getElementById('change-size');
var origX, origY;

var calcPolygonPoints = (sideCount,radius) => {
    var sweep=Math.PI*2/sideCount;
    var cx=radius;
    var cy=radius;
    var points=[]

    for(var i=0;i<sideCount;i++){
        var x=cx+radius*Math.cos( i*sweep )
        var y=cy+radius*Math.sin( i*sweep )
        points.push( { x:x, y:y } )
    }
    return(points)
}

canvas.initialize(el, {
	backgroundColor: '#fff',
	width: 600,
	height: 600
});
canvas.renderAll();

drawPoly.addEventListener('click', (e)=>{
	canvas.defaultCursor = "crosshair";
	canvas.selection = false;
	canvas.discardActiveObject();
	canvas.discardActiveGroup();
	canvas.forEachObject(object=>{ object.selectable = false; });
	canvas.renderAll();

	canvas.on('mouse:down', opt => {
		
		if (canvas.selection) return;
		var pointer = canvas.getPointer(opt.e)

		origX = pointer.x;
		origY = pointer.y;

		// I have also tried initial calculations here
		// by using calcPolygonPoints(8, Math.abs( origX - pointer.x ) / 2 ) instead of []
		// The result is the same
		const polygon = new fabric.Polygon(calcPolygonPoints(8, Math.abs( origX - pointer.x ) / 2 ), {
			objectCaching: false,
			left: origX,
			top: origY,
			originX: 'center',
			originY: 'center',
			fill: 'rgba(255,255,255, 1)',
			perPixelTargetFind: false,
			strokeWidth: 1,
			strokeDashArray: [0,0],
			objType: 'shape',
			stroke: 'rgba(17,17,17,1)',
			hasControls: false,
			hasBorders: false
		})
		// polygon._calcDimensions()
		canvas.add(polygon).setActiveObject(polygon)

	}).on('mouse:move', opt => {

		if (canvas.selection || !canvas.getActiveObject()) return;
		const newShape = canvas.getActiveObject()
		var pointer = canvas.getPointer(opt.e)

		if (newShape) {
			newShape.set({
				points: calcPolygonPoints(8, Math.abs( origX - pointer.x ) / 2...