Stack Overflow
Stack Overflow

Questions tagged [react-canvas]

18 questions
56
votes
6 answers

How can I use Fabric.js with React?

I have an application using heavily HTML5 canvas via Fabric.js. The app is written on top of Angular 1.x, and I am planning to migrate it to React. My app allows writing text and drawing lines, rectangles, and ellipses. It is also possible to move,…
Kitanotori
  • 1,741
  • 5
  • 16
  • 23
8
votes
2 answers

Best way to draw rectangles via mouse drag in React.js?

I'm trying to highlight areas of an image like how you would on your mac or windows by dragging an area with the mouse in a React.js application. I understand this would be best done on Canvas, by overlaying the canvas over the image, and then catch…
Saifis
  • 2,197
  • 1
  • 22
  • 36
7
votes
2 answers

How to use variable declared in useEffect() in another function?

p.s solved the problem i was having, but i would still like to hear your thoughts on this and my code, if you have time :) I can only assign a value to that variable ONLY after render has been completed, so i assume i must declare that variable in…
Irakli Tchigladze
  • 693
  • 2
  • 7
  • 13
4
votes
2 answers

How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?

What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas"…
Greg
  • 34,042
  • 79
  • 253
  • 454
3
votes
2 answers

Unable to download React Canvas Drawing

I want to download my drawing on the React canvas as a jpeg image file to my desktop, and then pass it to a python file for classification. Can someone specify a code to download the React canvas drawing, or suggest a better way to implement the…
Prishita Ray
  • 37
  • 1
  • 6
2
votes
0 answers

HTML canvas on mobile (react-native-canvas) flickering

I am trying to make a somewhat simple animation work on react-native. I'm using react-native-canvas and it seems to implement the normal html canvas well enough but I get some awful flickering on a real device. I get almost no flickering on iOS…
N3sh
  • 881
  • 8
  • 37
2
votes
1 answer

How to get Image response from react canvas draw?

I have used react canvas draw in react JS. I got response from getData function but i want to use response in image format but i am unable to get image. import CanvasDraw from "react-canvas-draw";
2
votes
0 answers

Stop dragging once connected

I am using React-Konva library for creating shapes using my palette. Then I am dragging it to connect. But once it is connected it should then draggable for group should only work not for each item. I have put different shapes inside a variable…
Kramer
  • 389
  • 8
  • 34
1
vote
0 answers

How can I add image and Animation on React Konva, to work Simultaneously?

The first image of contains a lion and an animated gif of yoda When I drag animated Yoda on canvas it turns into image, How can I make both animations and images work on Canvas. I tried merging Animation code and image code, but didn't work.
Sham Mallik
  • 11
  • 1
1
vote
1 answer

Cant draw video on canvas in ReactJs

I am trying to draw the video frames on canvas in react basically something which is already done in vanilla java script into react little differently. vanilla js code:
Hack Try
  • 471
  • 4
  • 17
1
vote
0 answers

Unable to preventDefault inside passive event listener invocation using Canvas Draw in React

I am using canvasDraw and it work fine in my desktop, but when i run in android this error appears: Unable to preventDefault inside passive event listener invocation. Now i explore the possible solutions, as set property of css touchAction:none in…
Matias.45454
  • 11
  • 1
1
vote
1 answer

TypeError: sigCanvasRef.getTrimmedCanvas is not a function

I get the error above when using getTrimmedCanvas. I read that when using a background style this error occurs because it needs a white background or something like that. Theres more code but i only pasted the relevant stuff. Thank you for…
Amir Hodzic
  • 11
  • 1
1
vote
1 answer

Building User Flow using Html5 Canvas, JavaScript and React.

I want to develop, user flow diagram library using Html5 Canvas, Js and React. Can anyone guide me on this, please?
Nizar Ali Hunzai
  • 257
  • 1
  • 2
  • 8
0
votes
1 answer

Multiple Peer React versions npm

I am working on a react-app. At the moment I have installed react@17.0.0 and I have some plugins which need this version of react. Now I wanted also to use react-canvas, which needs react@15.0.0. The Warning after installing react-canvas is the…
Minim
  • 3
  • 1
0
votes
0 answers

How do I implement a feaure that allows user to plot points on an image from the front end?

I'm a beginner to frontend and I have a use case where I allow user to select an image and plot points on it. Later I want to collect the coordinates of plotted points and do some basic math with them like calculating distance, area etc. I'm using…
acd10
  • 73
  • 11
1
2