JSFiddle - React, Tailwind, and code Playground

by SooChangLee

HTML

<canvas id="c" width="400" hight="400"
			style="border: 1px solid #d3d3d3;">
	</canvas>

JavaScript

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

var coords = [];
coords.push(15);
coords.push(17);
coords.push(75);
coords.push(80);

var line = new fabric.Rect({
  fill : 'transparent',
  stroke : 'red',
  strokeWidth : 5,
  selectable : true,
  left: 0,
  top: 0,
  width:100,
  height: 100
});

line.setGradient('stroke', {
 
    x1: 0,
    y1: 0,
    x2: line.width / 1,
    y2: line.height / 1,
/*     colorStops: {
        0: '#FF4F4F',
        1: 'rgb(255, 239, 64)'
    }, */
 colorStops: {
    0: 'black',
    1: 'red'
  } 
});

canvas.add(line);
canvas.renderAll();