Shadow

Fiddle demonstrating an issue with the bounding box not displaying in the correct size/location for programmatically created multiselections while the canvas is zoomed in Fabric JS

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<button id="toggle-shadow">Toggle Shadow</button>
<button id="toggle-stroke">Toggle Stroke</button>
<canvas id="c" width="400" height="200" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#fff";

fabric.Object.prototype.set({
  originX: "center",
  originY: "center"
});

var textbox = new fabric.Textbox('Sample Text', {
  left: canvas.width / canvas.getZoom() / 2,
  top: 100,
  left: 180,
  width: 300,
  stroke: "red",
  strokeWidth: 0,
  objectCaching: false,
});

canvas.add(textbox);

$('#toggle-stroke').click(function() {
  if(textbox.strokeWidth == 0) textbox.set('strokeWidth', 5);
  else textbox.set('strokeWidth', 0);
  canvas.renderAll();
})

$('#toggle-shadow').click(function() {
  if(textbox.shadow) textbox.setShadow(null);
  else {
    textbox.setShadow({
      color: "blue",
      offsetX: 5,
      offsetY: 5,
      blur: 2
    });
  }
  canvas.renderAll();
})