Stack Overflow
Stack Overflow

Questions tagged [konva]

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

270 questions
8
votes
3 answers

Change cursor on Hover in react-konva

I'm using react-konva to create a UI for an application. I want it so that the cursor changes to a pointer when hovering over a Rect. There is documentation for how to do it with konva but not for react-konva. Can anyone help?
SSPdude
  • 959
  • 1
  • 7
  • 11
6
votes
1 answer

Snapping Issue For Regular Polygons in React Konva

Here the bounding box of the triangle is not getting attached correctly to the ends of the triangle ,same is the case for all regular polygons.So when we are trying to snap shapes ,shapes are not getting snapped to the ends of regular polygons…
Athul R Nath
  • 73
  • 4
5
votes
2 answers

Jest encountered an unexpected token with react + konva and/or react-konva

With Konva and react-konva installed and imported, my jest@enzyme tests failed to run with this error: ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse,…
Peter Vida HU
  • 51
  • 3
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
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…
Promo Otter
  • 83
  • 4
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…
STRESSUNFIT
  • 33
  • 3
3
votes
1 answer

how to detect onClick event using konva shape

I made custom shapes to be added on the click position with react-konva. Now I want to detect onClick event when added custom shapes are clicked, but I think there is a problem because onClick events for Stage and Shape are overlapped. (…
sieun
  • 39
  • 3
3
votes
1 answer

How to set a custom Size to exporting image in react-konva?

I have created a responsive stage using react-konva, but I cannot find a way to set a custom size to export the image. usually, right-click and saving the image is working as the size in the window at that time has. I wanted to add a button to…
Mayura Abesingha
  • 33
  • 4
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

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

konva.js - fillPatternImage not being applied

I'm using konva.js via the vue-konva package. I'm trying to add a fillPatternImage but for some - probably simple reason - it's not being applied. Here's the code: // App.vue script const loadImage = function (imgSrc) { return new…
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
2
votes
1 answer

KonvaJS: Avoid blurriness when zooming in/out

I'm using KonvaJS to draw some figures and make simple animations. Sometimes a user zooms-in in the page and the drawn canvas gets blurry. I've noticed that if the page starts zoomed in, the blurriness is greatly reduced. So I thought a solution…
ArianJM
  • 676
  • 12
  • 25
2
votes
2 answers

Text truncation issue in a Konva.Text shape with low lineHeight?

I'm creating an app very similar to Canva, or the Polotno studio using Konva React. I'm facing a very annoying situation concerning Text shapes: When the lineHeight is inferior to 1.2, the height of the shape is computed at a lower value than the…
Bruno Jurado
  • 31
  • 1
  • 4
1
2 3
…
17 18