JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<script src="http://cloud.github.com/downloads/kangax/fabric.js/all.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="269.29px" height="269.29px" viewBox="0 0 269.29 269.29" xml:space="preserve" id="svg">
<text transform="matrix(1 0 0 1 7.5107 14.2222)" font-family="Arial" font-size="12">Text in the corner</text>
</svg>

CSS

canvas {
  border: solid #000 1px;
}

JavaScript

var svg = document.getElementById("svg");
var canvas = new fabric.Canvas('canvas');    

var image = fabric.Image.fromElement(svg);
canvas.add(image);