Vue中用fabric.js画线会出现错位、放大等等问题。

    let l1 = new fabric.Line([10,10,20,20],{stroke: "red", strokeWidth: "1"}); //x
    let c1 = new fabric.Circle({radius: 20, fill: "green", left: 100 - 20, top: 100 - 20}); //√
    let r1 = new fabric.Rect({left: 200, top: 200, fill: "red", width: 20, height: 20}); //√
    let t1 = new fabric.Triangle({width: 20, height: 30, fill: "blue", left: 50, top: 50}); //√
    let p1 = new fabric.Path("M 0 0 L 300 100 L 200 300 z");p1.set({ fill: "red", opacity: 0.5 });//√
    let pl1 = new fabric.Polyline([{x: 10, y:10},{x: 20, y: 20},{x: 20, y: 30},{x: 10, y: 70}],{stroke: "red", left: 0, top: 0, strokeWidth: "1"}); //x
    this.canvas.add(c1);
    this.canvas.add(r1);
    this.canvas.add(t1);
    this.canvas.add(p1);
    this.canvas.add(l1);

圆、矩形、三角、路径都没问题，就线、折线、多边形会出现这个问题，如下图：

这个是上面代码画出来的，线是有问题的：

控制台打印出的对象如下：

我只是想在(10,10)(20,20)画一条线，不知道为什么会出现这个问题。
fabric.js的版本是3.6.3

https://www.jianshu.com/p/d6d924eb5cf7