Questions tagged [konvajs]

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

Homepage: http://konvajs.github.io/

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

Konva supports node nesting, layering, caching, serialization, deserialization, animations, transitions, filters, custom shapes, configurable drag & drop, and more.

Multiple Canvases are used to create a high performance animation and event detection system. Konva also utilizes a virtual node system which allows developers to create hierarchies which resemble familiar HTML DOM structures and use familiar selectors (eg. '#foo') to manipulate nodes.

Konva allows you to draw shapes onto the stage, add event listeners to them, group them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

986 questions
2
votes
1 answer

Konva JS - How add Shapes custom with input value

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…
2
votes
2 answers

Canvas drawImage with high quality - Javascript

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…
soalrib
  • 589
  • 3
  • 9
  • 31
2
votes
1 answer

Dashed Arrow Head Filled With Color

I have used konvajs for creating a Konva.Arrow shape using dashed line. However, the arrow head is not filled with color. How can I get the arrow head to have a color? Here is the basis of the code I use to make the arrow. lineConfig['dash'] = [12,…
Ashok Kumar
  • 131
  • 1
  • 12
2
votes
0 answers

React-konva : 'Stage' is not exported by node_modules/react-konva/lib/ReactKonva.j

My aim was to introduce the following code into my existing react web application below. https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js:0-3896 I first stated off by just creating a simple-react app which included the code below and it worked…
Raza
  • 21
  • 2
2
votes
1 answer

Find nearest x & y point on a freehand line / Konva.Line shape, to a point on the canvas

I needed to find the nearest point on a Konva.Line shape to an arbitrary point on the canvas. See example below where the mouse pointer is the arbitrary point and the coloured line is the Konva.Line. I specifically needed a Konvajs…
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
2
votes
0 answers

Is it possible to simulate a erase action without having to create an extra shape in KonvaJS?

I am following this guide which contains a brush and eraser functionality. The guide's code sets the "globalCompositeOperation" to "destination-out" and basically ends up creating another line that will cover whatever you have drawn before with the…
elco45
  • 220
  • 1
  • 11
2
votes
1 answer

How to draw an arrow with the mouse using KonvaJS?

community. I need to draw an arrow with the mouse using KonvaJS. I do not use React. It's the first time I use KonvaJS. I have searched information for solving this problem but I found nothing. I also read the documentation of this library but I…
2
votes
1 answer

Is it safe to use useRef (React) to save state of a canvas (Konva) for REST API

I'm building a little React application with the purpose of Able to move shapes on a canvas Save the state of the canvas Use REST API to upload/load from state So far my application allows me to move shapes on the canvas and then save the state of…
callsuper
  • 89
  • 11
2
votes
1 answer

How to get rid of 'Text components are not supported for now in ReactKonva. You text is: "Loading..."' using react-konva and react-google-maps/api?

I want to render a Konva shape on top of a Google Maps layer. Since I'm using React, I use react-konva and react-google-maps/api libraries to work with. Everytime I run yarn start, I get this error: Text components are not supported for now in…
2
votes
1 answer

How can I rotate any shape or point on an HTML5 canvas around an arbitrary point?

I have seen a few cases of questions asking how to rotate a shape around a given point and decided to ask this self-answer question myself. So - in relation to HTML5 canvas, or in fact any two-dimensional surface, how can I rotate a shape around an…
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
2
votes
2 answers

How to draw back into the scene a removed shape with Konva?

I used remove() method to delete a rectangle from the scene, how can i draw it back? The documentation said: "remove a node from parent, but don't destroy. You can reuse the node later." Link to documentation I couldn't find any clue Thanks
Eco
  • 41
  • 4
2
votes
1 answer

Get konva object X, Y not the pointerPosition after dragging

I'm using konvajs to create boxes and can be dragged and save the x,y coordinates after double click into the database via ajax, here is the code: layer.on('dblclick','Group',function(evt){ var shape = evt.target; var…
rmontemayor0101
  • 137
  • 2
  • 8
2
votes
1 answer

which mobile app framework supports konva

I understand at the current moment, react-konva is not supported in React Native environment; however, wondering if vue-konva supports mobile app? Or if you can suggest me a way to migrate konva canvas content to an android app? Appreciate your…
2
votes
1 answer

Konva continue to track mouse outside stage

I am trying to implement a joystick that can be used to control something like a robot in React.JS using the React-Konva library. Thus far I have managed to get something that sort of works by drawing a smaller circle inside a larger one and letting…
Gerharddc
  • 3,921
  • 8
  • 45
  • 83
2
votes
2 answers

React-konva. Dynamic import SVG

I have a folder with SVG. I need to dynamically add those SVG on Konva's stage. I try to use this component. But it does not work. const URLImage = (name) => { const [image] = useImage(`../images/svg/${name}.svg`); return