SOURCE

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;

  var rect1 = new fabric.Rect({
    width: 200, height: 100, left: 100, top: 150, angle: 0,
    fill: 'rgba(255,0,0,0.5)',
    shadow:{
        offsetX:12,
        offsetY:12,
        blur: 5,
        color: 'black'
    }
  });

  canvas.add(rect1);

    document.getElementById('shadow').onclick = function() {
      if(this.checked){
          rect1.shadow = {
            offsetX:12,
            offsetY:12,
            blur: 5,
            color: 'black'
          }
      } else {
          delete rect1.shadow
      }
      canvas.renderAll();
    };

  function observeNumeric(property) {
    document.getElementById(property).oninput = function() {
      rect1.shadow[property] = parseFloat(this.value);

      canvas.requestRenderAll();
    };
  }


  function observeValue(property) {
    document.getElementById(property).oninput = function() {
      rect1.shadow[property] = this.value;
      canvas.requestRenderAll();
    };
  }

  observeNumeric('offsetX');
  observeNumeric('offsetY');
  observeNumeric('blur');
  observeValue('color');
})();

<div class="wrapper">

<canvas id="c" width="400" height="400"></canvas>
<div style="display: inline-block; background: #f5f2f0; padding: 0 10px; margin-top: .5em; margin-left: 10px; margin-right: -5px">
  <p>
    <label>
      <input type="checkbox" id="shadow" checked="">
      <code>shadow</code>
    </label>
  </p>

  <p>
    <label>
      <code>offsetX</code>
      <input type="range" id="offsetX" value="12" min="0" max="50" style="display: block">
    </label>
  </p>
  <p>
    <label>
      <code>offsetY</code>
      <input type="range" id="offsetY" value="12" min="1" max="50" style="display: block">
    </label>
  </p>
  <p>
    <label>
      <code>blur</code>
      <input type="range" id="blur" value="40" min="5" max="150" style="display: block">
    </label>
  </p>
  
  <p>
    <label>
      <code>color</code>
      <input type="color" id="color" style="display: block">
    </label>
  </p>
</div>
</div>


</div>

.wrapper{
    display: flex
}