HTML Canvas flickering
Hi i am trying to build a editing application like canva. right now i added functionality of image adding, resizing and dragging: https://www.veed.io/view/7867c461-0e4a-47b8-b0d0-b498ccc8d67f?panel=share. When i make any of dragging or resizing or even selecting an element on the canvas. the canvas flickers. I think this is because of frequent draw on canvas. How to avoid it.?
Srajan
VEED
VEED - Screen Recording - Oct 31, 2023
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
3 Replies
I think the flickering is happening, because i am redrawing the same canvas layer. Is having different layer of canvas for each element stacked on top of eachother a bad approch?. i think this wil solve the flickering issue, but the issue will be how to determine which layer the user wants to click,
Hard to tell without seeing the actual code, but i think the multiple layers would help for that yes.
i imagine you're already storing all the positions of all elements. so if you detect a click on the top layer, check if there is an element, otherwise check the layer(s) below with the same click position
@MarkBoots Layering the canvas fixed the flickering issue, can you please guide me on how i can achieve this using canvas: https://www.veed.io/view/f6da6b9d-6dc7-4ea7-aa1a-786579e26215?panel=share
Srajan
VEED
VEED - Screen Recording - Nov 3, 2023
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED