4 ms·
So the trick for performant animation here is to draw on canvas and put the canvas in front of all other elements but disable pointer events on canvas so that y
by lukax 2y ago
So the trick for performant animation here is to draw on canvas and put the canvas in front of all other elements but disable pointer events on canvas so that you can still interact with the page.
- ABNW 2y agoCorrect! Disable Pointer Events has surprising utility!
- amelius 2y agoWhat if you wanted to add the requirement that the user had to click on 1 specific piece of confetti?
- nicky0 2y agoThen you have a fun programming challenge.
- MartijnHols 2y agoAdd a click event listener to the body and overlay the event-coordinates on the canvas.
- amelius 2y agoWill the canvas allow you to hit-test the confetti piece given the coordinate?
- eyelidlessness 2y agoCanvas draws raster images, anything resembling an object in your drawing logic is already tracked separately by necessity. So regardless, you’d presumably check against whatever data model you’re using to determine what to draw.
- lupire 2y agoBy what time the user clicks, there's no reason for the program to need to remember what they drew where.
- eyelidlessness 2y agoIf that’s the case, what other object with coordinates would you reference on a canvas to determine whether it was clicked?
- pvorb 2y agoYou call it a trick for performant animation, but I couldn't think of any other way to implement something like this. What would a naive implementation look like?