konva | Konvajs Chinese Documentation Konva is a 2D JavaScript | Canvas library

I'm making a drawing application. In App.js I declare a constant value brushSize like this, which is by default 5:

I'm trying to add a custom element using buttons, when I add a new element and change the radius of the input, it changes the radius of all the circles in the square. I don't know what to do, I've already seen and revised my code and I couldn't find a solution.

I tried to find in the documentation what may be happening, I imagine the reason is that Scene func updates all objects. The big point is that if I add a circle when I create the layer it does not update when I add it via the button.

Hi I have this problem where if I want to install react-spring into my react project It just pops up bunch of dependencies errors and warnings and I don't know what to do with it. I tried to check documentation of react-spring but I couldn't find anything. I checked few pages here on stackoverflow and I still did not find anything useful. Can somebody help?

I'm using konva.js to draw elements on an HTML Canvas. When the user finishes its design in the canvas, the creation can be exported into a PDF file. In this context, my HTML structure is the following:

• a div "canvas" to append all the canvas
• a div "canvas0/canvas1" and so on to append each konva-canvas
• an auto-generated div "konvajs-content"
• and finally, multiple canvases depending on the number of layers

So, to export the PDF I have to go through each div "canvas + number" and then go through each canvas childNodes to use the getContext('2d') and drawImage function to draw an Image with the contents of each canvas (hopefully this description is not too confusing...).

Well, I'm able to export the pdf with multiple pages according to the number of canvases drawn, but the image drawn from the canvas has very low quality. Finally, my doubt is, how can I export it with higher quality?

I want to send another value in mouse event, because my handleMouseDown function is in another file.

I want to calculate the degree used in a Linear Gradient → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248)) into x & y co-ordinates to use it in Konva, which is basically a wrapper around Canvas.

I have found quite similar questions with a caveat that they are answered in vanilla Canvas, not Konva like:

• https://stackoverflow.com/questions/37669239/how-can-i-rotate-a-linear-gradient
• CSS convert gradient to the canvas version
• Canvas to use liniear gradient background set with an angle
• Calculate rotation of canvas gradient

But when I tried implementing them, I don't get the same desired effect as I get in CSS (see the comparison):

The code is quite similar to what is posted in some of the answers above:

1 -> Original Image

2 -> Result After Image Upload:

I am trying to convert the original picture in black outline transparent as shown in the below images.

I am using the Konva JS library for my project, but I cannot achieve this functionality using Konva.js.

Please suggest something to achieve the following functionality.

I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.

The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.

What is it that might cause the issue?

I have following example stage.