JSFiddle - React, Tailwind, and code Playground

by fahadnabbasi

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');

canvas.backgroundColor = '#FF0000';
var obj = new fabric.IText("hello\nworld",{
  left: 100,
  top: 100
});

canvas.add(obj);
canvas.setActiveObject(obj)

canvas.getActiveObject().set('shadow', {
                    color: '#00FFFF',
                    blur: 1,
                    offsetX:6,
                    offsetY: 6
                });
 canvas.getActiveObject().setGradient('fill', {
                    type: 'linear',
                    x1: -canvas.getActiveObject().width,
                    y1: canvas.getActiveObject().height/2,
                    x2: 100,
                    y2: 0,
                    colorStops: ['#FFFF00','#000000']
                });
canvas.renderAll();