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
0 answers

Fog of War Layer in KonvaJS

I have a browser strategy game in development and will be implementing a fog of war, which will draw two layers of fog (revealed before, never revealed) over the game map. I have some doubts about performance if I render every fog square on the grid…
Timothy Ryan
  • 189
  • 7
2
votes
1 answer

How to stretch text value in konvaJS to certain width and height?

In KonvaJS Text Object there is a property fontSize like fontSize: 30 but I need to stretch the text according the width and height I give for it. Here what I wrote: var textX = new Konva.Text({ text: 'X', align:…
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
2
votes
1 answer

Konva js - Bind drag start event to a draggable element and not move it

I have the following code. var stage = new Konva.Stage({ container: 'canvas', width: 500, height: 300 }); var eventWrapperLayer = new Konva.Layer({}); var createTriggerBlock = function(elemType, elemText, elemId) { …
Sooraj
  • 9,717
  • 9
  • 64
  • 99
2
votes
1 answer

How to apply a filter to a shape with image fill in KonvaJS?

I'm using Konva.js to do some canvas animations. I have circle shapes, with an image fill, and would like to apply a color overlay/filter to the shape (RGBA). This is how I'm creating the Shape object: var konvaObject = new Konva.Circle({ x:…
tdc
  • 5,174
  • 12
  • 53
  • 102
2
votes
0 answers

Why I cannot draw multiple curved arrows with sceneFunc() in Shape object using KonvaJS?

I am inspired with KonvaJS tutorial Modify Curves with Anchor Points to make my own example which is to create multiple custom arrows. on click on the selectionBox create an anchor. on the creation of the third anchor create the curved arrow. on…
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
2
votes
1 answer

Konva Propagate events between layers

I have a transparent drag layer on top of a shape layer. Works great to make interaction distinct so I can toggle what dragging does (between scrolling the view or editing the shape positions). However, unless I turn off drag mode (by hiding the…
Timothy Ryan
  • 189
  • 7
2
votes
1 answer

KonvaJs: Ring with Angular Gradient

I am using KonvaJS in my project. I need to make ring or arc with the angular gradient. The way it is done in this fiddle. I used colors which are used in the fiddle with Konva.Arc like this fillRadialGradientStartPoint:…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
2
votes
1 answer

Konva.js Cache Scale

Problem is when using node.cache() the node is first cached then scaled. How to achive first scaling then caching ? Thx in advance. var stage = new Konva.Stage({ container: document.getElementById('stage'), width: 400, height:…
2
votes
1 answer

HTML5 Canvas overlaying images

I'm using the konvajs library to draw multiple images to a canvas. The images are transparent on certain points. Now I want to attach a click handler to the images, but the click handler shouldn't be fired if the image is transparent on that point /…
Stefan
  • 14,826
  • 17
  • 80
  • 143
2
votes
1 answer

Konva get image ID from click event

I am trying to get the ID of the image I am clicking on by using the following code: theImg.on('click', function() { alert($(this).attr('id')); //Should show 'IDofImg' }); The Konva code is this: var theImg = new Konva.Image({ image:…
StealthRT
  • 10,108
  • 40
  • 183
  • 342
2
votes
2 answers

Can I use Jquery UI to drop into Konva (Kineticjs) stage and save to JSON string?

I'm trying to create a drag and drop tool using Jquery UI to drop rooms of a house into a Konva stage and then save that stage as a JSON string. Here is the JSFiddle: http://jsfiddle.net/RossWilliams94/cxzhabgL/4/ function dragDrop(e, ui) { //…
Ross
  • 21
  • 3
2
votes
3 answers

Erasing Parts of an Image on HTML5 Canvas?

I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. On a blank canvas I dram an image as shown in the figure below. Now I want to create a circle Shape which can be used to erase parts of the image. The red circle in the image…
Michael
  • 32,527
  • 49
  • 210
  • 370
1
vote
1 answer

KonvaJS toDataURL scene export to image not working with google cloud images

I have Konva scene with images which url is pointing to google could bucket. Images are public and can be simply opened from browser by url. When trying to export scene using scene.toDataURL() I get CORS error. According to solution from Konva…
Omkommersind
  • 276
  • 5
  • 13
1
vote
0 answers

Integration of KonvaJS with webassembly

I am working on a project where I have a requirement to render millions of shapes. The file which has information on all coordinates can have a size of ~500MB. I am planning to use web assembly in this so that I can use system memory for my complex…
Vikram Jain
  • 376
  • 2
  • 12
1
vote
0 answers

KonvaJS Input Field Sizes Issue in ngx-extended-pdf-viewer with Konva Groups

I'm developing a web app using Angular, KonvaJS, and the ngx-extended-pdf-viewer library for digital document signing. In this web app, users who prepare documents add input fields made up of Konva groups containing rectangles and text. These fields…
Haffoo
  • 13
  • 3