Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Sep 23 21:46
    lavrton closed #1178
  • Sep 23 21:46
    lavrton closed #1175
  • Sep 23 21:46
    lavrton closed #1166
  • Sep 23 21:46
    lavrton commented #1166
  • Sep 23 21:45
    lavrton closed #1163
  • Sep 23 21:44
    lavrton closed #1157
  • Sep 23 21:44
    lavrton commented #1157
  • Sep 23 21:44
    lavrton closed #1126
  • Sep 23 21:44
    lavrton commented #1126
  • Sep 23 21:43

    lavrton on master

    fix build, add docs (compare)

  • Sep 23 21:26

    lavrton on 8.2.0


  • Sep 23 21:26

    lavrton on master

    update CHANGELOG with new versi… build for 8.2.0 update cdn link (compare)

  • Sep 23 21:23

    lavrton on master

    export fixes add cmj info (compare)

  • Sep 23 16:32

    lavrton on master

    fix transformer versions (compare)

  • Sep 23 16:26

    lavrton on master

    hold parcel version (compare)

  • Sep 23 16:17

    lavrton on master

    cmj build (compare)

  • Sep 22 16:40
    Hexalyse commented #1181
  • Sep 22 15:15
    lavrton commented #1181
  • Sep 22 15:15
    lavrton commented #1181
  • Sep 22 15:14
    lavrton closed #1177
Anton Lavrenov
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.

Ashutosh Kumar
Is there any guide to Konva Coordinate systems?
Konva.Util.haveIntersection is not working for me after implementing Zoom In/Out using this
Ashutosh Kumar
Could anyone help me in this please?
Hi , I am trying to get the todataURl() of image droped in konva stage , is it possible to get dataURL of whole image even which is outside the viewport of stage. If possible then How
@lavrton I am trying to get the todataURl() of image droped in konva stage , is it possible to get dataURL of whole image even which is outside the viewport of stage. If possible then How
1 reply
SeungJu Lee

Is there a way to optimize rendering many Rects? I'm trying to render a 256x256 grid, but it's so slow. Is there a way optimize?

I love how I don't have to worry about onClick and other handlers, and way to write the grid declaritively. But I don't know how I can do the same without React Konva.

@lavrton Hi I m facing issue on loading image in canvas, because i m loading high quality image size varies from 1- 4MB. So that it takes some time to load, in example it takes 6-10sec In the mean time How Can I show some loader which is helpful for user to know the image been loading????
Yannick Schwarenthorer
Hi, is there a way to access current position of an element inside the dragmove eventhandler? The passed in event seems to not include that information.
Rudresh Trivedi
Hello All,
I am planning to automate Canvas app built by konva. Any guideline or tool suggestion? It seems, I'll have challenge with Selenium. Any feedback would be appreciated.
Eirik Måseidvåg
Hello, I'm working with the Transformer and im wondering if the matrix used is using same scheme as CSS matrix meaning:
this.m[0] = 1; // Scale X
this.m[1] = 0; // Skew Y
this.m[2] = 0; // Skew X
this.m[3] = 1; // Scale Y
this.m[4] = 0; // Translate X
this.m[5] = 0; // Translate Y
Hi, I cannot set a value for the new Konva.Filters.Grayscale filter, how can this be done for the native canvas - ctx.filter = 'grayscale(0.65)' - https://stackoverflow.com/a/67392978;
is it possible to do it in Konva? help me please
Vinay M
@lavrton Hey Anton. Would it make sense to use useEffect instead of useLayoutEffect in React KOnva
https://github.com/konvajs/react-konva/blob/master/src/ReactKonvaCore.js#L43 . Since Konva doesnt care about DOM mutations, why cant we use useEffect ?
Hello, is there a way for prevent anti-aliasing when scaling/rotating using Transformer? Currently when scaled/rotated my 3 true-color image starts having pixel-level gradients in between different colors
Oh and I already have layer.imageSmoothingEnabled(false) as well as image-rendering : pixelated on my scss
hello guys, i'm trying to restrict the stars show only in the black cirle, i set globalCompositeOperation property as destination-in with the stars group, but it doesn't work
it's just like that each <v-star> are all to be destination-in, but I'd like the star group to be destination-in the black circle
does anybody got this issues before?