Como en el título, estoy usando fabricJS 4.6.0 con VueJs 3 .

Estoy tratando de configurar simplemente la tela con rectángulos de tamaño variable.

Mi problema es acceder al lienzo del objeto fuera del método initFabric.

No puedo cambiar el tamaño o rotar el rectángulo, solo muévelo.

La única forma de hacer que funcione es declarar canvas como const si uso this.canvas no funciona.

aquí el jsfiddle https://jsfiddle.net/8vzc3bj5/19/

 initFabric: function () { var canvasEl = this.$refs.canvas; canvasEl.width = 1920; canvasEl.height = 1080; const canvas = new fabric.Canvas(canvasEl, { // isDrawingMode: true, centeredScaling: true, backgroundColor: "#fff", selectionBorderColor: "rgba(255, 255, 255, 0.8)", selectionColor: "rgba(255, 255, 255, 0.8)", selectionLineWidth: 2, borderColor: "gray", cornerColor: "black", cornerSize: 12, transparentCorners: true, }); canvas.on("selection:created", this.handleSelection); canvas.on("selection:updated", this.handleSelection); canvas.on("after:render", this.updateCanvas); canvas.on("object:modified", this.updateCanvas); canvas.on("object:added", this.updateCanvas); canvas.on("object:removed", this.updateCanvas); canvas.on("mouse:wheel", (opt) => { var delta = opt.e.deltaY; var zoom = canvas.getZoom(); zoom *= 0.999 ** delta; if (zoom > 20) zoom = 20; if (zoom < 0.01) zoom = 0.01; canvas.zoomToPoint( { x: opt.e.offsetX, y: opt.e.offsetY }, zoom ); opt.e.preventDefault(); opt.e.stopPropagation(); }); this.$nextTick(() => { var rect = new fabric.Rect({ left: 100, top: 50, fill: "yellow", width: 200, height: 100, stroke: "lightgreen", strokeWidth: 4, zoomX: 1, zoomY: 1, dirty: true, }); canvas.add(rect); rect.center(); canvas.setActiveObject(rect); canvas.bringToFront(rect); canvas.renderAll(); }); this.resizeCanvas(); },

Gracias