如何在fabricjs中填充对角线

Question

enter image description here enter image description here

我正在使用Fabricjs。它的版本是2.4.5。

我想在不同时间在两侧填充对角线。

右条纹对角线：

https://i.hizliresim.com/P1My55.png

左条纹对角线：

https://i.hizliresim.com/JZ20pQ.png

我试图像这样填充0.01白色和黑色。但是我不能设置对角线。如果图像高度很大，我的代码可以正常工作。

多边形高度越高，线条越水平。

canvas = new fabric.Canvas('canvas');
let points = [
	{x: 0, y: 0},
  {x: 300, y: 0},
	{x: 300, y: 350},
	{x: 0, y: 350}
];

let polygon = new fabric.Polygon(points, {
  fill : 'white',
  stroke : 'black',
  strokeWidth : 5,
  selectable: true,
  objectCaching: false,
  lockScalingX: true,
  lockScalingY: true,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true
});

let colorStops = {};
for (let i = 0; i <= 100; i++) {
  let key = (i / 100);
  colorStops[key] = i % 2 === 0 ? "black" : "white";
}

polygon.setGradient('fill', {
  x1: -polygon.width,
  y1: -polygon.height,
  x2: polygon.width,
  y2: polygon.height,
  colorStops: colorStops
});
    
canvas.add(polygon);
canvas.renderAll();

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

Fiddle