Stack Overflow
Stack Overflow

Questions tagged [konva]

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

270 questions
1
vote
0 answers

How to resize a Konvajs scene with CSS?

I am using konvajs to edit the image. I want to make the scene size 500x500 pixels to edit uploaded image but at the same time I need it to be 50%x50% of the parent element to have the same aspect ratio on different screens. With a simple html…
gnd20032
  • 11
  • 2
1
vote
1 answer

How do I crop a konva image when it has been resized?

In my project, I have a konva canvas where I can add items. I default these item images to a height and width of 200. When trying to apply a crop to the item, the crop ignores the resized image dimensions. It crops the image size to the correct…
chonglawr
  • 201
  • 1
  • 3
  • 15
1
vote
0 answers

TypeError: Konva.Stage is not a constructor

I cannot find the reason of this error anywhere. On runtime I get the following error: TypeError: Konva.Stage is not a constructor at file:///[path]/src/index.ts:40:15 at ModuleJob.run (node:internal/modules/esm/module_job:197:25) at async…
47ndr
  • 583
  • 5
  • 23
1
vote
1 answer

Konva (react) - Group draggable and child drggable

I want to have a group which is draggable. Inside the group I have a child which is also draggable. Currently dragging the group works properly. But sometimes the child is not selected properly when I start drag. And when it does start dragging, it…
Jellohouse
  • 165
  • 3
  • 12
1
vote
1 answer

Performance issue when dragging/zooming high resolution image in KonvaJS canvas

I am currently loading a rather large image (15000x10000) into a konva canvas. The canvas is draggable in another canvas. The image is not drawn if parts of it leave the view of the browser. The main problem is that the dragging is not smooth when…
lef
  • 67
  • 4
1
vote
0 answers

Konva.js How can I resize the image with fixed position?

I'm trying to resize image with Transformer. The problem lies that when the image is resized, the image is not fixed and moves as much as it is reduced in that direction. For these reasons, I removed offset offsetX={image ? image.width / 2 : 0}…
JiHyun Kim
  • 33
  • 3
1
vote
1 answer

Konva React image not displaying

I have a very simple Konva-react app (I've taken it right out of the docs) and it doesn't work (doesn't display the image) displaying two warnings: Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for…
Алексей Николаев
  • 107
  • 8
1
vote
1 answer

Creating a custom shape in konva.js using path2d?

Using d3 for some shape calculations, then drawing with Konva.js. Creating a new shape from a svg path string. The shape is drawn, but fillStrokeShape doesn't seem to apply any styles. The documentions says: We can use the renderer to access the…
Ivan Bacher
  • 5,855
  • 9
  • 36
  • 56
1
vote
1 answer

What are the different purposes of "id" and "name" for shapes in Konva

Konva shapes have both "id" and "name" properties. Presumably these are intended to serve different needs, but how should they be used in Konva? Are either used by Konva itself, or are they just holders for user-defined data?
Gadger
  • 11
  • 1
1
vote
1 answer

Konvajs/Vue-Konva connect the shapes using the connector dynamically

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. Now I would like to use some sort of Connectors to connect the different Rect Shapes so that I can have the logic of…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
1
vote
1 answer

Konvajs/Vue-konva add Text/Label to each of the created Rect shape

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…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
1
vote
1 answer

Make a auto-shrinking text which fit in text element with Konva

In Konva, we can use attributes like fontSize to determine the text size. But we want more, we are implementing a feature that can allow us to shrink the text size automatically. For example, we have a text element in canvas with different lengths…
Will
  • 325
  • 2
  • 9
1
vote
2 answers

React Konva Rotation/Revolution Animation

Hey I am new to react konva. I am creating a project in which i want a rectangle to revolves around an object. Can anybody advise me on how to achieve this. Any help is much appreciated
…
tanmya
  • 73
  • 7
1
vote
0 answers

How to set custom(some calculate logic) color according to each pixel value(R,G,B) using KONVA

I am trying to convert the color of the pixel using KONVA image class. The conversion method is as follows. var avg = (R + G + B)/3; if(avg > 200){ pixelColorR = 255; pixelColorG = 255; pixelColorB = 255; }else { pixelColorR = 200; …
Web Star
  • 431
  • 3
  • 20
1
vote
1 answer

Konva/Canvas Background Blur / Frosted Glass effect

I'm using Konva/Canvas to draw multiple semi-transparent rectangles z-ordered. At the moment, this looks like the right side of the following image. Now, I want to achieve something which is called "Frosted Glass Effect" / "Background Blur" which…
hypnomaki
  • 593
  • 9
  • 22
1 2 3
…
17 18