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
Jus Sus || 💀
Jus Sus || 💀•13mo ago
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,
MarkBoots
MarkBoots•13mo ago
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
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@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
Want results from more Discord servers?
Add your server