[Vuejs]-Fabric.js IText interaction issue, moving but not editing

by

0👍

✅

For those who will face same problem in the future:

The problems goes from Vue reactivity that uses a lot of proxy under the hood, that in that particular case have some conflicts with fabric.js library and causes unexpected behavior

So solution is: remove any reactivity from fabric.Canvas and any fabric.Object you are trying to interact with.

Many hours of research leads to this small change

doesn’t work:

 const canvas = ref<fabric.Canvas | null>(null)
 canvas.value = new fabric.Canvas(canvasRef.value, {
  width: containerWidth.value,
  height: minHeight,
})

works as expected:

let canvas = null as fabric.Canvas | null
canvas = new fabric.Canvas(canvasRef.value, {
    width: containerWidth.value,
    height: minHeight,
  })

Leave a comment