fabric diagonal gradient

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>

JavaScript

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

var rect = new fabric.Rect({
  left: 20,
  top: 20,
  width: 150,
  height: 1
});


rect.setGradient('fill', {
  x1: -rect.width / 2,
  y1: -rect.height / 2,
  x2: rect.width / 2,
  y2: rect.height / 2,
  colorStops: {
    0: "green",
    0.1: "black",
    0.2: "orange",
    0.3: "yellow",
    0.4: "purple",
    0.5: "red",
    1: "blue",

  }
});

canvas.add(rect);
canvas.renderAll();