JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
Canvas:
<canvas id="c" width="800" height="150"></canvas>
<input type='button' id='btn' value='SAVE TO SVG' /><br><br>
SVG
<div id='svg'>
</div>

JavaScript

var canvas = new fabric.Canvas('c');
		var text_input = new fabric.IText("Edit this and save", { 
			angle: 0,
			centeredRotation: true,
			centeredScaling: true,
			rotatingPointOffset: 25,
			fontSize: 100,
			stroke: '#dd5f60',
			strokeWidth: 2,
			lineHeight: 1,
			left: 0, 
			top: 0, 
			fill: '#00ff00',
      shadow: ''
			});


canvas.add(text_input);
canvas.renderAll();
document.getElementById('svg').innerHTML = canvas.toSVG();

document.getElementById('btn').onclick = function () {
  document.getElementById('svg').innerHTML = canvas.toSVG();
}