JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//fabricjs.com/lib/fabric.js" ></script>
<script src="//code.jquery.com/jquery-3.1.1.min.js" ></script>
<div>

<label for="corner radius">corner radius:</label>
  <input type="input" value="10" id="cornerRadius" onChange="changeRadius()" >

</div><br>
<div id="myCanvasWrapper">
  <canvas id="myCanvas" width="400" height="400"></canvas>
</div>

CSS

canvas {
  border: 1px solid #333333;
}

JavaScript

function addRoundRect(){

  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: '#ff00ff',
    width: 100,
    strokeWidth: 2,
    stroke: "#FF0000",
    rx:80,
    ry:80,
    height: 100
  });
  canvas.add(rect);
  canvas.renderAll();
canvas.setActiveObject(rect);
}
function changeRadius(){

  var activeObject = canvas.getActiveObject();
  var val = $('#cornerRadius').val();

  activeObject.set({'rx': val,'ry':val});
  //activeObject.set('ry',$('#cornerRadius').val());
  activeObject.setCoords();
  canvas.renderAll();
  console.log('change:',activeObject,val);
}
var canvas= new fabric.Canvas('myCanvas');
addRoundRect();