For graphic example see GIF at the end ⬇️

I'm using a reactive variable to access a fabricJs canvas. I want to create a rectangle with every double click on the canvas. However, when I create an object I can select it but not resize or edit it until I drag a selection and release it. Here's a portion of the code

<script lang="ts" setup>
import { fabric } from 'fabric'

const canvas = ref()
const handleCreated = (fabricCanvas) => {
  canvas.value = fabricCanvas
}

const handleClick = () => {
  if (!canvas.value) return

  const rect = new fabric.Rect({
    width: 120,
    height: 120,
    fill: 'blue',
    left: 250,
    top: 50,
  })

  canvas.value.add(rect)
  canvas.value.renderAll()
}
</script>

<template>
  <FabricCanvas
   class="w-full rounded-lg"
   @canvas-created="handleCreated"
   @mouse:dblclick="handleClick"
   />
</template>

For graphic example see GIF at the end ⬇️

I'm using a reactive variable to access a fabricJs canvas. I want to create a rectangle with every double click on the canvas. However, when I create an object I can select it but not resize or edit it until I drag a selection and release it. Here's a portion of the code

<script lang="ts" setup>
import { fabric } from 'fabric'

const canvas = ref()
const handleCreated = (fabricCanvas) => {
  canvas.value = fabricCanvas
}

const handleClick = () => {
  if (!canvas.value) return

  const rect = new fabric.Rect({
    width: 120,
    height: 120,
    fill: 'blue',
    left: 250,
    top: 50,
  })

  canvas.value.add(rect)
  canvas.value.renderAll()
}
</script>

<template>
  <FabricCanvas
   class="w-full rounded-lg"
   @canvas-created="handleCreated"
   @mouse:dblclick="handleClick"
   />
</template>

This is FabricCanvas Component:

<script lang="ts" setup>
import { fabric } from 'fabric'

const canvasReference = ref()
const emit = defineEmits(['canvas-created', 'mouse:dblclick'])

onMounted(() => {
    
    const canvas = new fabric.Canvas(canvasReference.value)
    emit('canvas-created', canvas)
    canvas.on('mouse:dblclick', () => {
      emit('mouse:dblclick')
    })
  }) 

</script>

<template>
  <canvas ref="canvasReference"> </canvas>
</template>

If I create the elements directly in the onMounted() event of the FabricCanvas ponent then I have no problems resizing/editing them.

Here's a question with the same issue but for Alpine, so the solution there won't work for me: Cannot resize/edit objects until I group/ungroup them - AlpineJS + FabricJS

So I guess I need to get rid of the reference or access the canvas in a different way. I just don't know how.

Here's a GIF of the behavior:

• javascript
• vuejs3
• fabricjs
• nuxt3.js
• vue-reactivity

• Thank you, i had the same problem - when i defined the fabric.js instance global (outside of the ponent) everything worked fine, but when i added the fabric.js instance to the ponent i had the same problem.. Couldn't find what it was.. – eXXecutor Commented Sep 12, 2023 at 14:53

2 Answers 2

I can add markraw to it work:

<script>    
import { markRaw } from 'vue';
...
canvas.add( markRaw(rect)  )
...
</script>

Block conversion to proxy by use markRaw()

const rect = markRaw(new fabric.Rect({width: 120,height: 120,fill:'blue',left: 250,top: 50,  }));