react-konva | JavaScript library for drawing complex canvas graphics | Data Visualization library

I encapsulated my whole app inside a react-redux Provider and given it a store parameter, and up to this point I was able to use it successfully from various points of my app. Now, suddently I created a hierarchy that looks like this: Canva > RenderPolygons where both the two components are connected to the store via connect() function.

On Canva level redux works perfectly but when I try to add the RenderPolygons or any other component connected to the redux store I get the Uncaught Error: Could not find "store" in the context of "Connect(RenderPolygons)" error.

The codes look like this:

Canva:

I'm using React-Konva (React version of KonvaJS) to draw custom shapes, mostly irregular polygons, and apply transformations to it, like moving them around, scaling and rotating.

Now, once the polygons are in place I need the coordinate of the vertices for another feature, but even though I move it around and transform and whatnot, the shape appears correctly modified but the vertices coordinates are still the initial ones.

For instance if I have a triangle at (0,0), (1,0), (0.5,2) and then drag it all the way to the right, after the drag ended the triangle will appear in the new position on the canva, but when printing the vertices it still will output (0,0), (1,0), (0.5,2).

How do you get the updated coordinates of all the vertices? I'm using the Shape class for the polygons with draggable set to true for the translation, and the Transformer class for scaling and rotating.

I'm trying to draw with Konva a rectangle when clicking a button

This is the code:

Hello everyone and thank you for reading,

I'm new to redux and Iv been trying to connect a grandchild component with the store, but for some reason It doesn't work.

The child component (called canvas) uses the store as well and doesn't show any problem, but when I'm trying to get the same data in a component I call from within the child component I get: "Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a Provider tag"

I searched for the solution on the internet and everybody suggests to wrap the app component in provider tags inside index.js, but I already did that in the beginning

index.js

I have a very simple Konva-react app (I've taken it right out of the docs) and it doesn't work (doesn't display the image) displaying two warnings:

1. Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
2. Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. My Canvas component:

I want to implement a free hand area selection on canvas using react-konva. Anyone have solution or suggestion ?
Please refer screenshot for better understanding.
Thank You !!!

And I tried this, https://codesandbox.io/s/dry-flower-b5eof-b5eof

How do we assign ref to the stage or layer object. I am using react-konva. When I do console.log(stageE1), it says undefined.

I am trying to generating multiple polygon from a quite large json file. The polygon should separate each other, but it somehow connected each other.

I am building it in next.js.

Here are the codes:

Canvas.tsx

I'm trying to use toDataURL with React-Canvas.

I found this example on their website. It's exactly what I want to do!

I copied/pasted the code, but I keep having an error:

Property 'toDataURL' does not exist on type 'never'.ts(2339)