Fabric JS - alignment lines

HTML

<canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

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

fabric.util.object.extend(fabric.Object.prototype, {
	redrawAlignmentLines: function(){
    const ctx = this.canvas.getContext("2d");
		const rad = fabric.util.degreesToRadians(this.angle);
    const bb = this.getBoundingRect();
		
    this.setCoords();
    canvas.contextContainer.strokeStyle = 'red';
    //ctx.save();
    
    if (this.alignmentLines.left) {
    
	    ctx.moveTo(bb.left, 0);
			ctx.lineTo(bb.left, 600);
	    ctx.moveTo(bb.left + bb.width, 0);
			ctx.lineTo(bb.left + bb.width, 600);
	    ctx.moveTo(0, bb.top);
			ctx.lineTo(600, bb.top);
	    ctx.moveTo(0, bb.top + bb.height);
			ctx.lineTo(600, bb.top + bb.height);
			ctx.stroke();  
    }
    //ctx.restore();
  }
});

var red = new fabric.Rect({
	id: 1,
  left: 200,
  top: 200,
  width: 100,
  height: 100,
  fill: 'red',
  angle: 30,
  originX: 'center',
  originY: 'center',
  alignmentLines: {
  	top: true,
    left: true
  }
});
canvas.add(red);
canvas.add(red);
//canvas.renderAll();

canvas.on('after:render', function() {
	canvas.forEachObject(function(obj) {
		obj.redrawAlignmentLines();
	})
});