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

selecting by drawing a box around objects in konva

Is there an example or way of drawing a box around multiple objects on the konva canvas and by doing so selecting the objects which are inside this box with some kind of indicator around them?
Andreas Zeiner
  • 537
  • 7
  • 24
4
votes
1 answer

konva js destroy function isn't working immediately

this is my code. i'm making my custom API to arrange GUI. I want to destroy window when I click red button, but It isn't working immediately. Window is destroyed when I clicked another window. I want to destroy window immediately(not after clicking…
DDoLgi
  • 57
  • 6
4
votes
1 answer

Using image mask with globalCompositeOperation on KonvaJS?

I am using Konva.js framework and trying to apply an image mask over an other one. The code is fully copied from this post. In this jsfiddle example there is small modifications to add a background (Rect). The problem is that the background is not…
4
votes
1 answer

how to make shapes with opacity, but not the border in konvajs

I am using konvajs for drawing on canvas. I just found a opacity property, where I can set the opacity of the whole shape (in my case a closed line) to the alpha value, but that also includes the border and not just the filling opacity. new…
Safari
  • 3,302
  • 9
  • 45
  • 64
4
votes
1 answer

KonvaJS: Scale Image From Center

I am facing some challenges while scaling a Konva.Image. I want to scale the image from it's center point. Although I am able to scale it from center but I am not sure whether it is a correct way of doing this or not. Currently it is scaled from…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
4
votes
2 answers

how to do performant overlap/collision detection for hundreds of canvas circles?

I am drawing 100 circles of varying sizes to a canvas, and they must not overlap. these circles will also be animating from right to left (looping back around to the right edge of the canvas when they go off the screen), and will also have some…
tdc
  • 5,174
  • 12
  • 53
  • 102
4
votes
1 answer

How to make selection box in Canvas to select any object it touches not only objects it embraces?

There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by…
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
4
votes
2 answers

How to get width & height of drawn arc(s) in HTML5 Canvas?

Here I have drawn some arcs using Konvajs library, but I cannot get their width and height after the objects have been drawn, How can I do that? for quick read of code: function drawSurface(idnumber, radius, x, y, startAngleParam, endAngleParam)…
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
4
votes
1 answer

Konva drag drop without moving drag element

My question is how to drag and drop a shape, but with cloning the draggable shape, and dragging that clone to the droppable shape. I am new to Konva. While looking around the documentation & examples I could find how to drag and drop a shape. I…
konvadev
  • 41
  • 1
  • 2
3
votes
1 answer

Using Vanilla JS Canvas Methods with Konva Stage and Addressing Missing Functionality

I'm working on a web project that involves creating website like Canva. I've decided to use the Konva library for managing canvas-based graphics due to its ease of use and interactivity features. However, I have a few questions regarding the…
3
votes
1 answer

Uncaught Error: its-fine: useFiber must be called within a

I'm trying to use konva js in my react app and here is the version details package.json "react": "^16.8.6", "react-dom": "^16.8.6", "konva": "^8.4.2", "react-konva": "^18.2.3", min code to recreate error import { Stage } from…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
3
votes
1 answer

ESM packages (konva) need to be imported. Use 'import' to reference the package instead

I get the following error when importing Html from react-konva-utils. I have tried importing this using a dynamic import and just by standard import. For instance: export const Html = dynamic( () => import("react-konva-utils").then((mod) =>…
jmecs
  • 143
  • 2
  • 13
3
votes
1 answer

How do I save Canvas animations created in Frontend in Node.js Backend?

Here is what I have tried: I used a library called Konva.js to create animations in the Frontend. Animations include Text, Image, Shapes etc Everything works fine in Frontend. I want to make change text and render 1000s of videos in the backend. I’m…
Anirudh
  • 2,767
  • 5
  • 69
  • 119
3
votes
1 answer

Resizing canvas to fit within container

Having some trouble trying to get my Canvas/Stage to resize and fit correctly within the parent container. I've found other similar posts and while the answers did help me with obtaining the new screen size it still doesn't want to fit within the…
Jastreb
  • 37
  • 4
3
votes
1 answer

Vue-konva running into error: Must use import to load ES Module

I am trying to implement the Vue-konva into my application by following the documentation here. But I am running into the following error: Must use import to load ES Module: /Users/myName/projects/projectName/node_modules/konva/lib/index-node.js…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
1 2
3
65 66