Template for issues

by Steve Eberhardt

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

canvas.on('mouse:down', (e) => {
    const roundedRect = new fabric.Rect( {
        top: e.pointer.y,
        left: e.pointer.x,
        width: 0,
        height: 0,
        stroke: 'black',
        strokeWidth: 3,
        rx: 10,
        ry: 10,
        fill: 'transparent',
        hasControls: false,
    });
    canvas.add(roundedRect);
    canvas.setActiveObject(roundedRect);
});
canvas.on('mouse:move', (e) => {
    const pointer = e.pointer;
    const activeObj = canvas.getActiveObject();
    let height = Math.abs(pointer.y - activeObj.top);
    let width = Math.abs(pointer.x - activeObj.left);
    activeObj.set({ height: height, width: width});
    activeObj.setCoords();
});

// Zoom in/out
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});
    
// Add the SVG to the canvas
function newSVG(svg) {
  var svggroup = [];
  fabric.loadSVGFromURL(svg,function(objects,options) {
    var newsvg = objects[0];
    if (objects.length > 1) {
      newsvg = fabric.util.groupSVGElements(objects, options);
    }
    newsvg.set({
      stroke: "#000",
      strokeWidth: 20,
      strokeUniform: true,
      originX: "center",
      originY: "center",
      paintFirst: "stroke",
      strokeLineJoin: "miter",
      left: 100,
      top: 100,
      height: newsvg.height + 80,
      width: newsvg.width + 80
    });
    newsvg.scaleToWidth(100);
   ...