I am encountering difficulties when attempting to rotate rectangles on an HTML canvas in place. In the provided JS Fiddle, you can see the original image displayed here: https://jsfiddle.net/vyx2hbky/. What I aim to achieve is to rotate the lines slightly, perhaps by 45 degrees, while keeping them in their original positions.
Upon uncommenting the commented code in the JS Fiddle, which reads as follows,
ctx.translate(coords[0], coords[1]);
ctx.rotate(Math.PI / 4);
the initial rectangles start behaving erratically and appear messy. They do not rotate in place, causing confusion with how to rectify this issue.
I have reviewed various Stack Overflow inquiries about rotating rectangles around their center point, yet I struggle to identify said center point for each rectangle initially and replicate this process across all rectangles within the canvas.
Experimenting with
ctx.translate(coords[0] + c.width / 2, coords[1] + c.height / 2)