Shape gradients in fabricJS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<canvas id="my-canvas"></canvas>

JavaScript

var canvas = new fabric.Canvas();
var el = document.getElementById('my-canvas');

canvas.initialize(el, {
	backgroundColor: '#fff',
	width: 600,
	height: 600
})

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 150,
  height: 150,
});
canvas.add(rect);

var redToOrangeGradient = { 
	x1: "50%",  // For a vertical gradient, the x1 & y1 don't matter as long as they are the same
	y1: "0%",   // The top of the gradient will be at the top of the object
	x2: "50%",
	y2: "0%", // The bottom of the gradient will be at the bottom of the object
	colorStops: {
		0: "#FF0000",
		1: "#FFFF00"
	}
}

rect.setGradient('fill', redToOrangeGradient);
canvas.renderAll();