+ 2

How can we fix my ReactJS canvas resize prototype?

I'm trying to make a fairly simple ReactJS component that dynamically sets width and height to match the canvas DOM element's pixel dimensions but running into a problem. I wrote it as short and simple as possible to help anyone reading this question. Here is my prototype: https://joshi1983.github.io/pages/reactCanvasPrototype/ All of my custom JavaScript is in: https://joshi1983.github.io/pages/reactCanvasPrototype/reactApp.js When I check the console, my console.log statements show: render called. canvasWidth = 100, canvasHeight = 100 reactApp.js:8 componentDidMount called. canvasWidth = 100, canvasHeight = 100 reactApp.js:19 Tried setting state to {"canvasWidth":895,"canvasHeight":696} reactApp.js:42 render called. canvasWidth = 895, canvasHeight = 696 How can I get my drawing code to run after the correct canvasWidth and canvasHeight have been processed by the render method?

13th Jul 2021, 2:56 AM
Josh Greig
Josh Greig - avatar
1 Answer
0
You could try an approach with promises, or you can try to use state and props updates. I currently only have my phone with me, I can look at the code in 2 weeks, then I can use my Computer to inspect the Code. (If the problem isn't solved by then)
27th Aug 2021, 4:30 PM
KnÀcke Brot
KnÀcke Brot - avatar