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

Scaling bug with multi-touch Canvas scale with pinch zoom

Using the sample code from Konvajs.org as a base (https://konvajs.org/docs/sandbox/Multi-touch_Scale_Stage.html), I have added a large SVG to a layer (4096 x 3444) to experiment with zoom / pan of a vector-based map, base64 encoded SVG in this…
Jose
  • 43
  • 2
4
votes
2 answers

Using konva on a nodejs backend without konva-node

We are a team of 5 developers working on a video rendering implementation. This implementation consists out of two parts. A live video preview in the browser using angular + konva. A node.js (node 14) serverless (AWS lambda container)…
flohall
  • 967
  • 10
  • 19
4
votes
1 answer

Circular cropping of image in konvajs

I wanted to show circular cropped image in my canvas and I'm using konvajs. Is there any way to do it in konva itself or is there any workarounds with JS/CSS? This is the code I use for loading the image. var src =…
skns
  • 132
  • 1
  • 8
4
votes
2 answers

How can I get the intersection of three shapes colliding and delete the parts that are not colliding using HMTL5 Javascript Canvas?

I've recently posted a similar question specifically for KonvaJs here, however, I have not gotten any answer and wanted to go directly to the root of what KonvaJs uses. I would like to know if there's a standard way of solving the following problem…
4
votes
0 answers

How can I get the intersection of three shapes colliding and delete the parts that are not colliding in KonvaJs?

If I am given 3 circles and they are positioned as the primary colors circles (3 circles intersecting each other), is there a function that might help me to delete the parts that are not colliding with anything and just keep the intersecting…
4
votes
2 answers

KonvaJS - zoom always in center of canvas

Im struggling with modifying the code below so when zooming on scroll, the image is being zoomed always in the center of the image, not depending on the cursor position (so the image doesnt move, it just zoom in/out doesnt matter where your cursor…
Patrickkx
  • 1,740
  • 7
  • 31
  • 60
4
votes
1 answer

Understanding offscreen canvas to better performance

Hey everyone so I have a very complex canvas editor that allows a user to pick a video background, add text, gifs and Lottie animations using the Konvajs and Gifler libraries. It has come a long way however I am trying to speed up the performance of…
codernoob8
  • 434
  • 1
  • 9
  • 24
4
votes
2 answers

How can I use characters like ö and é in konva.Text?

How can I use characters like ö and é in konva.Text?
Bert Jan
  • 41
  • 2
4
votes
4 answers

Konvajs: Create a draggable area with some constraints on one of the childs

I'm creating a timeline with Konva and the entire timeline (stage) is draggable on all directions but I have an axis with all the years of the timeline (Konva group) that I want to restrict its movement so that it only moves horizontally. I can't…
dbeja
  • 366
  • 2
  • 6
  • 15
4
votes
1 answer

Change width and size instead of scaleX and scaleY in Konvajs

I am implementing the transforming feature for a simple rectangle using Konvajs, but it changes the scaleX and scaleY of the shape and not the actual width and height of the element. What would be the right approach to change the actual width and…
Jacobdo
  • 1,681
  • 2
  • 18
  • 38
4
votes
3 answers

Animate drawing of path on HTML5 canvas

My problem is how to animate the drawing of a path between two points. Consider a curved line or path between two points, A & B. I can draw this easily on the canvas using the line drawing functions in Konvajs. However, what I actually want is to…
ramory-l
  • 119
  • 2
  • 9
4
votes
2 answers

draw() on finish callback

I'm trying to find any callback/event that can notify me about the finish of layer draw() method. I would something like this: var layer = new Konva.Layer(); layer.draw(() => console.log('Draw finished')) Or: var layer = new…
Sergey L
  • 55
  • 4
4
votes
4 answers

How to set zindex in konva.js?

I have a problem with the Zindex in konva.js. After I added everything to the layer I am trying to assign a property to a node for each element separately. But it does not work. For example for(let i = 0; i<=this.layer['children']; i++){ …
4
votes
1 answer

Konvajs how to apply scale effect from the center to an image

Below is a basic growing effect in Konvas.js (v 2.4), starting from the upper left corner of the image (https://codepen.io/simedia/pen/mzrvJq) var width = window.innerWidth; var height = window.innerHeight; // where everything stands in Konvas var…
simedia
  • 213
  • 2
  • 7
4
votes
1 answer

What's the difference between `destroy` and `remove` in konvajs

I have create a shape object(like konva.Rect) and want to reuse it in some cases. In the first place, add it to layer, and everything is fine, like drag, move .etc. And then destroy it from layer by some trigger event, and at some point in time, add…
navono
  • 152
  • 1
  • 8
1
2
3
65 66