Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Apr 16 12:55
    lavrton closed #1098
  • Apr 16 12:55
    lavrton commented #1098
  • Apr 16 09:50
    Albert-cord opened #1098
  • Apr 13 13:37
    lavrton commented #1096
  • Apr 13 11:59
    Jomik commented #1096
  • Apr 12 16:08
    lavrton commented #1097
  • Apr 12 16:05
    lavrton commented #1096
  • Apr 12 16:04
    lavrton commented #1096
  • Apr 08 23:52
    hxdev opened #1097
  • Apr 08 08:05
    Jomik opened #1096
  • Apr 06 12:32
    RickvanB closed #1095
  • Apr 06 11:34
    RickvanB commented #1095
  • Apr 06 11:11
    RickvanB commented #1095
  • Apr 06 11:02
    friksa commented #1095
  • Apr 06 10:58
    RickvanB commented #1095
  • Apr 06 10:56
    RickvanB commented #1095
  • Apr 06 10:56
    RickvanB commented #1095
  • Apr 06 10:51
    friksa commented #1095
  • Apr 06 10:50
    friksa commented #1095
  • Apr 06 10:48
    friksa commented #1095
the problems that I have is that there are an async movment between the circle and the rotator, the rotate takes a moment to find its place AND the circle does not react on clicks
with Konva.Transformer you can config the anchor points, like the color, size and corner radius of an anchor radius
are there options for the rotation point/rotater only?
@lavrton how I can draw the line with random color on canvas. and also can I remove the shape( rectangle, circle, etc..) with an eraser like we remove the line.
@lavrton I am using react-konva.
Anton Lavrenov
@waqasahmad34 what did you try?
@lavrton i have created a drawing app. you can check here. https://www.demo.diggiart.com/signin
Prakash Ujjwal
Hi, I was working on including rotate gestures in my app following the tutorial given on https://konvajs.org/docs/sandbox/Gestures.html. But in my app i have also attached 'tap' event listener so whenever I tried to rotate the shape using gesture , 'tap' event gets emitted also is there any way so that I can prevent that from happening means while rotation via 2 finger rotate gesture, 'tap' event should not get emitted?
Hey there konva community. I know it isn't directly supported, but is there anyone who has come up with a successful way to convert the konva canvas to svg?
Anton Lavrenov
@CalvinBentoSMB I was doing it manually a project.

I made an app for free drawing. The app works on Konva. But is was better to save the result as SVG. So I just manually generate from konva nodes.

Then parse it back to konva nodes.

So it was a manual work.

Hi @lavrton , trying to wrap my head around attaching a Transformer to a cropped image to scale only the cropped area.

I added the image to Konva.Group, together with a "fake shape"

const cropProps = {
x: 50,
width: 100,
height: 100

<Image ref={image}  {...imageProps} crop={cropProps}/>
<Rect id="fakeShape" {...cropProps}
onTransform={() => {
//How to scale the image taking into account the offset of the cropped area


My question is how can I scale the image as the "fake shape" is scaled , while taking into account the values of the cropProps such that the original image's x,y always matches the cropped area?

Anton Lavrenov
I don’t understand how visually it should look.
@lavrton How to achieve transform snaps
Wesley Mostien

I have stage with hundreds of text items on it and I have performance issues while zooming/scaling. I have done all the performance enhancements listed here (except caching) : https://konvajs.org/docs/performance/All_Performance_Tips.html

When I scale the stage with the mousewheel, the font size of these text items should remain visibly the same. So indeed I can keep the absolute scale at 1 like you've suggested here: https://stackoverflow.com/questions/60757623/increase-text-size-in-konva-js-map-when-user-zooms-out

But while implementing this solution works, it is totally not user friendly. The scaling stutters like crazy because I need to loop over all text objects and adjust the scale for each of them on every call of the mousewheel handler.

Any ideas how to accomplish such a feat? Thanks

Anton Lavrenov
@wesleymostien in fact caching is the most powerful.
Are all texts objects visible at the same time?
They all on the screen?
Wesley Mostien
yes sir
i am trying caching now and different approach, i am getting there. But some objects disappear if I turn on caching, what is the reason exactly? I have read something about there is a problem when using strokes (my rectangles have only strokes and no fill). But what is going on exactly with caching?
and has grouping objects any positive effect on performance? so it doesnt have to scale all objects separately but the group as a whole?
Anton Lavrenov

and has grouping objects any positive effect on performance? so it doesnt have to scale all objects separately but the group as a whole?

No, the perf will be the same.

Hi @lavrton , I have a bit complex shape. I have a group containing path, text, arrow and bit a code to connect arrow with the path. I am trying to change size of text as per change of font size or family. I am trying to do so when transforming at the group. Any idea how I go about it. Thanks
Shohel Rana
has someone made draw.io using react-konva? or any other similar app. I will use this for kids learning where kids will drag and drop alphabet, numbers, and shapes to the whiteboard and can change easily the color of the alphabet, number and they can make a word by letter so we need grouping features for alphabet and number also.
Shohel Rana
I wanna update text color from outside of konva stage like from side bar using html input[type=color], but i have to click on shape to change it where as I need live color change as I change color in input. How can I achieve that?
If anyone can solve this then please mail me as I am not active on gitter. my mail is rohitsinghshan@gmail.com
Do you have plan to port library to blazor ??

Hey guys. I've search everywhere but I'm not able to find an answer to my question. Or my wrongfull work haha. Hope someone can point me in the right direction.

My setup:

So I have a Stage with one layer.
I have several elements on there (Text and Image elements) which work perfectly.
I also have a group which consists of two text elements.

The problem:

When I export all these elements to save them in my database, all elements come out correctly according to their X and Y positions. However, one element, the Group, has negative X and Y coordinates even though I can cleary see it on my canvas.

What I've tried:
When I log the the console the positions after dragging the Group I can clearly see that they are negative. However I can still see it ony my screen.
I thought it was an absolute position problem but when I do group.getAbsolutePosition(), It get the same, incorrect, coordatinates.

Who can help me out here?!

Anton Lavrenov
@ChristiaanBilthof we are moved to discord https://discord.gg/Cq8Zr7ywgd, please ask a question there
Puneet Jindal

Hi All, i am trying to achieve following functionality on my canvas based image editing/drawing tool
As a user, i should be able to
1) Draw a polygon
2) Drag and drop it
3) Add vertices in the polygon by breaking an edge into multiple edges from midpoint of the edge
4) Delete the polygon
5) Assign labels to the polygon

Anyone who would be able to help my developer for the same? you can whatsapp me at +917838860769 or connect with me at https://www.linkedin.com/in/puneetjindalisb/

Bala krish
how to fill rectangle with lines?. is there any builtin option available in konva js
Daniel Andreyev

Hi everyone!
I have error.

My stage is draggable and after that getPointerPosition return incorrect coordinates

this.stage.on('click', (e) => {
      let target = this.stage.getPointerPosition()
          x: target.x,
          y: target.y,

For scale I found this lifehack:

        var mousePointTo = {
          x: (pointer.x - stage.x()) / oldScale,
          y: (pointer.y - stage.y()) / oldScale,

What I need do when I have draggable stage for calculate mouse pointer position?

Syed Muhammad Abdullah Zaydi
Hey! I've been dealing with a problem for almost one week, I want to create a layer feature inside my application similar to pixlr layers feature. Where you can change the layer position resize the layer and also add filters to the layer. I've did almost everything in that web app. but that layer feature is really confusing. I somehow managed to make it change the layer position eg change the zIndex of the layer, with the help of the article provided on the konvajs portal. But It has made the application work slowly. the application is lagging and the sliders are not working well. Also the state doesn't changes when I move the slider. The effect takes place after a few clicks and sometimes when i move the layers.
Hi, I want to put an image as the background and draw on it. when using the eraser, I just want to ease drawings not the image
Hi, I am using konva js to annotate high resolution images that have pixel size above 20k * 20k. I am unable to display those images on my canvas. I tried to open those images on mozilla and it opens when I used browser to open our jpg directly but when I use my application to open those images they are not opening up. Any help will be much appreciated.
Dev Expert
can we use xml image for konva?
Hi all, how can I handle an event on the image outside of the clipped group part ? or how can I drag that's image ?
Hi there is there a way to make drag and drop a image to like click and drop ?
Dev Expert
Hi can we use flash xml into konva
i have xml and i want to display using metrix
Hi, How are you?
I am building a mobile app using knova.js in my ionic project.
What I am facing is that I cannot export the layer into the image.
I think the reason is that the frontend handles it.
Upon checking this guide, it seems this behavior should be work on the server side.
but I hope to export this layer into the image on the frontend side.
Is there any solution? Thank you in advance
Bala krish
Can I generate Konva js shapes using node js or anyother server side frameworks. Because I would like to generate canvas using backend rather than client browser. Help with this please.
@krishbala1997_gitlab konva is a frontend library. maybe you can return json from the server and dynamically create your canvas like that?
Ricardo Canastro

is there any good example of a draggable area with bounds that work properly with rotated shapes? I'm having a really hard time implementing a dragBoundFunc on rotated shapes :\

PS: I mean, Im trying to have an editor area where shapes should not leave.