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');


// 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,
      objectCaching: false
    });
    newsvg.scaleToWidth(100);
    canvas.add(newsvg);
    canvas.setActiveObject(newsvg);
    canvas.bringToFront(newsvg);
    canvas.renderAll();
  });
}
newSVG("https://upload.wikimedia.org/wikipedia/commons/5/51/Star_full.svg");