JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<div id="container">
  <canvas id="canvas" width="400" height="400"></canvas>
</div>
  <button id="buttonToSvg">TO SVG</button>
  <div id="svg-container"></div>

JavaScript

let url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png';
  fabric.Object.NUM_FRACTION_DIGITS = 10;
  let canvas = new fabric.Canvas('canvas', {});
  fabric.loadSVGFromURL(url, function(ob, op) {
  	let object = fabric.util.groupSVGElements(ob, op);
        object.set({opacity: 0.3});
    canvas.add(object).viewportCenterObject(object).renderAll();
  });
  document.getElementById('buttonToSvg').addEventListener('click', function() {
    let svg = canvas.toSVG();
    document.getElementById('svg-container').innerHTML = svg;
  });