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
3
votes
1 answer

How to update the x and y coordinates of the image after being dragged to a different position?

I have a konva canvas with images where I can add images to the canvas and drag them around. The images are a DOM elements that can be dragged onto the canvas, like here: {loadImages.map(image => (
Ninini
  • 81
  • 2
  • 6
3
votes
1 answer

Calculate degrees of Linear Gradient in Canvas using Konva with React?

I want to calculate the degree used in a Linear Gradient → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248)) into x & y co-ordinates to use it in Konva, which is basically a wrapper around Canvas. I have found quite similar…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
3
votes
2 answers

Export Canvas from React Konva to SVG & PDF?

Currently, I can only use jpeg & png exports like: stageRef.current?.getStage().toDataURL({ mimeType: 'image/jpeg', quality: 1 }) stageRef.current?.getStage().toDataURL({ mimeType: 'image/png', quality: 1 }) I want to export Canvas to svg as well…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
3
votes
1 answer

What is the best way to drag a transformer by dragging from empty areas in Konvajs?

I'm currently following this guide to select shapes in the stage and put them inside a Transformer. If possible, I'd like to drag an entire Transformer with all of its content without touching any of the shapes inside. For example, I have two lines…
elco45
  • 220
  • 1
  • 11
3
votes
2 answers

JS Canvas: Konva bezier issue

I want to draw polyline with round corners like this: There is an issue with setting points to line with Konva library. I am trying to use bezier property to simulate smooth corners without tension and as doc says: if no tension is provided but…
mr.boris
  • 3,667
  • 8
  • 37
  • 70
3
votes
1 answer

Konva errors/warnings in Firefox console

I am getting an error message in the Firefox console for the simplest possible Konva demo. The HTML page:
awthird
  • 67
  • 4
3
votes
2 answers

Vue Konva. Improve performance of rendering multiple circles with animation

I am trying to increase the performance of my code below. I am looking to render multiple circles every X seconds onto the screen at the position of the mouse cursor. The gif shows it nicely. This is how it currently looks when I hold down the mouse…
SamuelB
  • 157
  • 9
3
votes
1 answer

How to change the position of transformer rotation icon

I've started react-konva. And I am trying to use Transfomer. For now rotate handler is top-center and I want to place it to bottom-center, left or other side. How can I do that? https://konvajs.org/docs/select_and_transform/Transformer_Styling.html
Programmer
  • 65
  • 7
3
votes
1 answer

Detecting image events for non-transparent pixels only (drawHitFromCache) in Vue Konva

So I'm basically trying to reproduce this behavior - detecting events for non-transparent pixels only (as seen when hovering over the lion) - but in vue-konva. Here is the demo I'm working with. It basically just loads the image of lion and…
Arx
  • 384
  • 2
  • 13
3
votes
1 answer

How to change to update an attribute in KonvaJS

I have the following piece of Konva code and I am trying to update the text attribute var lifePoint = new Konva.Text({ x: 50, y: 50, id: 'P1', text: 'Player Lifepoint: 100', fontSize: 30 }); After reading the documentation I…
3
votes
1 answer

KonvaJS - Toggle anchors when mouseon/mouseoff of image

In my KonvaJS project, I'm adding images aka "stickers" onto an uploaded image, and with KonvaJS, I'm adding "Anchors" to rotate and resize the images. When the mouse is off the main image, (or maybe when you click on the sticker, it toggles edit…
kinx
  • 463
  • 5
  • 12
  • 31
3
votes
1 answer

Javascript two objects intersecting

I have been using Konva for drawing, I would like the arrow to "snap" to the other groups or shapes when the tip of the arrow intersects them and the user lets up on the mouse. If the arrow does not interset one then it should automatically delete…
laxer
  • 720
  • 11
  • 41
3
votes
1 answer

How to custom React-Konva rotation handler?

I've started react-konva. And I am trying to use Transfomer. For now rotate handler is top-center and I want to place it to bottom-center with rotateHandlerOffset. I have updated back shape using sceneFunc. And set y position as…
Fresh Friend
  • 489
  • 1
  • 3
  • 11
3
votes
0 answers

Advantages of Konva.js over Paper.js

So I've been looking for a canvas wrapper to work with, and it seems as though I've narrowed down the options to Konva and Paper.js. Konva seems to have a really active maintainer, can render individual layers one at a time (more performant) and…
Modermo
  • 1,852
  • 2
  • 25
  • 46
3
votes
1 answer

Context menu with Konva.js

I have a map with multiple objects, like players, towers, enemies etc.. They are added to the map with this function: const createCustomObject = (sides, radius, color, x, y) => { let customObject = new Konva.RegularPolygon({ fill: color, …
user6898463