vue-konva | JavaScript library for drawing complex canvas graphics | Animation library

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. I would like to know if there is a way to add a Text/Label within each of the shapes. I want to add a name to each of Shape so as to identify each of the Shape separately.

I have added my code sample here in CodeSandBox.

Can someone please let me know how can I add the Text/Label to each of the Rect/Shape that has been created using Vue-Konva

I would like to create Rectangle Shapes and Connections using the Vue-Konva/Konvajs within my application. I do not want to create load the Static values rather I would like to create the Shapes when the user clicks on the Add Node button and create Connectors when the user clicks on the Add Connector button and build the connections between Shapes.

I looked into a few things and was able to do it using the mouse events but was unable to convert it to button clicks.

Following is the current code I have: CodeSandbox

Can someone please guide me on how to create shapes and connectors on click of the button events? Any suggestion or guidance is much appreciated.

I am looking something like this:

I followed the documentation and Github I did the following steps:

1. install vue-konva and konva and canvas using npm install vue-konva konva --save and npm install canvas --save.

2. Created vuekonva.js under plugins folder with below content:

I am trying to implement the Vue-konva into my application by following the documentation here. But I am running into the following error:

I'm using Konva in a Vue application, and I can't suppress Konva's warnings in browser console. According to Konva docs, there is an option for this, Konva.showWarnings = false. (I understood the warning itself and am aware of its possible implications).

I've checked this: Turn off Konvajs warnings, but to no avail, the answer here just explains that such a setting exists.

What I'm doing in my main.js file:

I am trying to build a very basic app for editing videos, using Vue-Konva in Vue 2. Here's a Vue component named 'konvaStage'. It's a simple stage with a 1px black frame :

I'm using konvajs and vue-konva to position an image on a rectangle area. I need to cache this image in order to apply a custom filter on it.

This image is uploaded by the user and its dimensions can be quite large (from the device camera in example) and the device can be a smartphone with limited resources.

With small images, everything works fine but when the user choose a big image on a mobile (2500x2500 in example), the image is rendered first and disappears when cache() method is called on the image node.

It seems to depend on the device: everything is fine on my laptop but not on my smartphone (both high-end devices), both with an up to date version of Google Chrome. I've managed to reproduce the issue on my laptop with an even bigger image (~6000x6000).

I don't really know if it is related to Konva or if I reach browser limitations with large files (which could explain it depends on the device). If so, any advice/workaround would be much appreciated.

Last but not least, I need to make an export of the canvas in order to print it later (300dpi resolution, the final image witdth has to be around 2300px) so I can't reduce too much the image size.

You can reproduce with this link.

So, I've been working with vue-konva and I have something like this:

With konva.js you can create video components on your canvas. Here you can see the example in the docs (https://konvajs.org/docs/sandbox/Video_On_Canvas.html).

Now I'm using vue-konva and there is no component to create a video on the canvas. You need to do it with the v-image component but I am not able to make it work. Is it possible with vue-konva?