JSFiddle - React, Tailwind, and code Playground

by SooChangLee

HTML

<link rel="stylesheet" href="http://wtf.limpidia.net/minicolor/jquery.minicolors.css">
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="http://wtf.limpidia.net/dragdrop/jquery.event.drag.js"></script>
<script src="http://wtf.limpidia.net/minicolor/jquery.minicolors.min.js"></script>
<script src="http://wtf.limpidia.net/radass.js"></script>
<script src="http://wtf.limpidia.net/fabric.js"></script>
<script src="http://wtf.limpidia.net/lodash.js"></script>
<div id="mygrad">
	hey
</div>

<div id="editor"></div>

<button type="button" id="boldit">bold!</button>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding:0;
}

body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow:hidden;
}

#mygrad {
    position:absolute;
    right:222px;
    top:40%;
}

#editor {
    float:left;
    background:white;
    margin-top:25px;
    margin-left:25px;
}

#boldid { font-weight:bold; float:left; }

JavaScript

var $w = $(window);
var $canvas = $("<canvas/>").attr({ id:"mycanva",width:$w.width() - 300,height:$w.height() - 50 });
var $editor = $("#editor").append($canvas);
var $fabric = new fabric.Canvas("mycanva");

$fabric.controlsAboveOverlay = true;

var myobj = 
//new fabric.Rect({ height:100, width:100,
//new fabric.Circle({ radius:60,
//new fabric.Text("hello\nworld",{
new fabric.IText("hello\nworld",{
  left: 100,
  top: 100
});

setTimeout(init,1);

/*var myobj;
fabric.loadSVGFromString('',function(objs,opts){
    myobj = new fabric.PathGroup(objs,opts);
    setTimeout(init,1);
});*/

var deg2rad = Math.PI/180, rad2deg = 180/Math.PI;

/* convert angle to circle perimeter coordinates */
function angle2circle(angle,radius){
    var a = (angle + 180) * deg2rad;
    return { x: Math.round( (Math.cos(a)+1)*radius ),
            y: Math.round( (Math.sin(a)+1)*radius )
           };
}

/* convert angle to rectangle perimeter coordinates, thx a lot to RHJPP for this */
function angle2rect(angle,sx,sy){
    var a = ((angle + 180) % 360) * deg2rad;
    var xr = Math.tan(a - Math.PI / 2) * sy / 2;
    var yr = Math.tan(-a) * sx / 2;
    
    if (a <= Math.PI) xr = -xr;
    if (a <= Math.PI / 2 || a > 3 * Math.PI / 2) yr = -yr;
    
    xr = Math.min(Math.max(xr + sx / 2, 0), sx);
    yr = Math.min(Math.max(yr + sy / 2, 0), sy);
    
    return {x:xr, y:yr};
}

function setGradient(obj,angle,colors){
    var odx = obj.width  /2,
	ody = obj.height /2,
	gradient = {};
	    
    if(obj instanceof fabric.Circle)
    	gradient.start = angle2circle(angle, odx);
	else
		gradient.start = angle2rect(angle,obj.width,obj.height);

	/* simple simetrie between start & end */
    gradient.end = { x : obj.width  - gradient.start.x, y : obj.height - gradient.start.y };
   
    if (obj instanceof fabric.PathGroup){
        obj.getObjects().forEach(function(o){
            odx = o.width  /2;
            ody = o.height /2;
            
            o.setGradient('fill',{
                x1:...