I am trying to develop an Image Editor, which provides functionality to add multiple images on canvas and make image draggable. I have implemented a solution but it sky rockets my CPU usage.
On every image upload, I am saving the shapes(starting x and y coordinates, width, height) into a global state array and drawing it. Now, image is drawn so I try to drag it by implementing that if mouse coordinates collide in the image and as soon as I try to move mouse by dragging I modify the coordinates of the dragged shape and then again saving it to the global state, and re drawing the whole canvas on mouse move.
I want an optimised approach to minimise CPU usage. I have an approach in mind to use 2 canvases, but I am not really sure how to approach it.
Naman Shankhydhar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.