Stack Overflow
Stack Overflow

Questions tagged [react-konva]

react-konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

react-konva is, judging by the volume of questions arising on SO, an increasingly popular combo for development of HTML5 canvas solutions within Reactjs. The Git page is at https://github.com/konvajs/react-konva

As a subject, it is sufficiently different from the plain JS Konvajs library that folks will benefit from tagging it with a specific tag. This will assist others searching for solutions that are specifically Konvajs-Reactjs, but they should also consider broadening their searches to plain konvajs as there is a wider body of question material for this and although it is plain-JS, the concepts are generally taken into react-konva.

292 questions
1
vote
1 answer

How can I tint an image with react-konva?

I've created a class to load images into my canvas using event listeners, based on the URLImage example on the Konva website. I have a PNG composed entirely of white pixels on a transparent background. I want to tint the white pixels a solid color…
Matthew Ratzloff
  • 4,518
  • 1
  • 31
  • 35
1
vote
1 answer

Why I get 30 fps in chrome dev tool performance panel, but JS and React both say it's 60?

I'm trying to use react to develop the classic game tutorial how-to-make-a-simple-html5-canvas-game. Everything went well until I found my movement is a little bit glitchy, online test link and code. While the original game written in JS is much…
Stupidism
  • 113
  • 1
  • 2
  • 7
1
vote
1 answer

React: Canvas drawImage is not updating the canvas

I am using react konva to draw images on a canvas. I have two different Layers (canvas in konva) inside a Stage Element. One picture is predetermined and one gets updated by an input at runtime. Both Pictures get shown fine, but when I try to save…
Florian Jäger
  • 157
  • 1
  • 14
1
vote
1 answer

Image rotation in react-konva

const bush1Image = new Image(); bush1Image.src = 'bush1.png'; bush1Image.rotate(90); I need to rotate the image before using this.setState, so why the above code doesn't work?
Fady Wasfalla
  • 21
  • 2
1
vote
0 answers

React DnD with react-konva

I have implemented react DnD to copy and drag elements and drop in to a container. Now I want to implement react-konva to create an arrow between them. It would be really helpful if someone an help me in direction and give some pointers of how to…
saurav garg
  • 11
  • 1
1
vote
1 answer

Moving an object on array makes konva objects lose their transform changes like rotation, position

I'm using react-konva, in it I have an array with all my konva objects, and I have a function that brings the selected object to the front or back of this array to create layers on my kanvas. When I fire this function, the order of objects inside…
ribas
  • 97
  • 1
  • 8
1
vote
1 answer

Preventing memory leaks in react-konva

The Konva library has a helpful list of performance optimizations. I am writing an application using react-konva and would like to specifically know if there is any work to be done when a component is unmounted to prevent memory leaks. Do I need to…
jVERM
  • 131
  • 1
  • 5
1
vote
1 answer

Rendering hundreds of thousands of circles with react-konva

I'm working with react-konva to render big genetic datasets and I'm fairly new to both konva and react-konva. It has been extremely helpful for code iteration with its easy to use api. However, I'm running into scaling issues rendering tens/hundreds…
jVERM
  • 131
  • 1
  • 5
1
vote
1 answer

React-konva connect two nodes with a weighted arrow

I want to create a weighted directed graph in react-konva. What I have achieved so far is to create the nodes and connect them using an Arrow component. The next step is to add a label on the Arrow which will represent the weight of the edge. The…
Charles Nikolopoulos
  • 35
  • 4
1
vote
1 answer

In React-Konva, How to get the position of a click on an Image-shape in a draggable Stage

On Konva (React-Konva to be precise) there is a Stage with a Layer with an Image. Clicking on that Image gives the position of the Click on that Image. But after Dragging (either the Stage or the Image), the position is different. In React-Konva…
BertC
  • 2,243
  • 26
  • 33
1
vote
1 answer

KonvaJS scale down image without losing quality

I am building a Cordova app with image manipulation using Konva (react-konva to be precise). The idea is that when I take a picture with a camera - I can add some markers to it using this library. But as I don't have much space - I need a relatively…
Kristis
  • 389
  • 3
  • 16
1
vote
1 answer

How to test react konva from cypress?

I have rectangles as screens on canvas using react-konva. How to test clicking the screens rectangle on testing tools like cypress that uses DOM Element to select the target element? I am seeing that this is impossible, unless by creating screens…
Inovramadani
  • 1,955
  • 3
  • 14
  • 34
1
vote
1 answer

javascript / react - switching the properties of two objects in an array in react state without triggering a re-render

I just need to replace one array object's keys with another. I'll provide a rationale for why I *think I need to do this afterward to try and avoid the TLDR, in case someone spots a deeper reason why I might not need to do this at all. So…
mheavers
  • 29,530
  • 58
  • 194
  • 315
1
vote
1 answer

How to retrieve clipping region's dataURL?

I am trying to retrieve a clipping region's dataURL, but whenever rects are outside of the region, the resulting image has a margin (I guess that it is trying to include the rects). Here is an example of the behavior:…
Thomas
  • 61
  • 6
1
vote
1 answer

How to set HTML-id for a canvas element rendered with react-konva

I am using react-konva in a project to render HTML5-canvas elements: import desktop_tea_1 from "./previews_desktop/tea_1.png"; const DesktopTea1 = () => { const [desktop_tea_1_const] = useImage(desktop_tea_1); return
user8865520
1 2 3
…
19 20