JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<html>
	<head>
		<script src='http://fabricjs.com/build/files/text,gestures,easing,parser,freedrawing,interaction,serialization,image_filters,gradient,pattern,shadow,node.js'></script>		<meta charset="utf-8">

		<style>
			html,body
			{
				height: 100%; min-height:100%;
				width: 100%; min-width:100%;
				background-color:transparent;
				margin:0;
			}
			button
			{
				height:44px;
				margin:0;
			}
		</style>

	</head>
	<body>

		<span id="dev">
			<button id="draw_mode" onclick="toggleDraw()">Draw</button>
			<button onclick="addRect()">Add Rect</button>
			<button onclick="addCircle()">Add Circle</button>
			<button onclick="addTriangle()">Add Triangle</button>
			<button onclick="addLine()">Add Line</button>
			<button onclick="addArrow()">Add Arrow</button>
			<button onclick="clearCanvas()">Clear</button>
			<button onclick="saveCanvas()">Save</button>
			<button onclick="loadCanvas()">Load</button>
		</span>
		<span id="selected" style="visibility:hidden;">
			<button onclick="removeSelected()">Remove</button>
		</span>
		<canvas id="c" style="border:1px solid #aaa;"></canvas>

		<script>

		fabric.Object.prototype.toObject = (function (toObject)
		{
    	return function ()
			{
        return fabric.util.object.extend(toObject.call(this),
				{
            id:this.id,
        });
    	};
		})(fabric.Object.prototype.toObject);

		fabric.LineArrow = fabric.util.createClass(fabric.Line, {

  type: 'lineArrow',

  initialize: function(element, options) {
    options || (options = {});
    this.callSuper('initialize', element, options);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'));
  },

  _render: function(ctx){
    this.callSuper('_render', ctx);

    // do not render if width/height are zeros or object is not visible
    if (this.width === 0 || this.height === 0 || !this.visible) return;

    ctx.save();

    var xDiff = this.x2 - this.x1;
    var yDiff = this.y2 - this.y1;
    var angle =...