JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
<p>Click on the image to add it to the canvas.</p>
<div id="images">
<svg width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://design-tools-storage-dev.s3.amazonaws.com/DESIGN_TOOL/SVG_SHAPE/TviWPzI1QXGLJ6gs1vlTEg" width="100" height="100"></image>
</svg>
</div>
<canvas id="testCanvas" width="400" height="320"></canvas><be>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

var canvas = new fabric.Canvas('testCanvas', {
    hoverCursor: 'pointer',
    selection: true,
});
  
  $(document).ready(function() {
      // Load the SVG to the canvas when it gets clicked on
      $('#images').on('click', 'image', function() {
        var svgURL = 'https://design-tools-storage-dev.s3.amazonaws.com/DESIGN_TOOL/SVG_SHAPE/TviWPzI1QXGLJ6gs1vlTEg?asd=lol';
  			console.log("Image Clicked")
        fabric.loadSVGFromURL(svgURL, function(objects, options) {
        console.log("fabric.loadSVGFromURL")
          var group = new fabric.Group(objects, {
            left: 100,
            top: 100,
          });
          canvas.add(group);
          canvas.renderAll();
        }, null,
        { crossOrigin: 'anonymous' },);
      });
    });