Hacker News new | past | comments | ask | show | jobs | submit login

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.



Correct! Disable Pointer Events has surprising utility!


What if you wanted to add the requirement that the user had to click on 1 specific piece of confetti?


Then you have a fun programming challenge.


Add a click event listener to the body and overlay the event-coordinates on the canvas.


Will the canvas allow you to hit-test the confetti piece given the coordinate?


Canvas 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.


By what time the user clicks, there's no reason for the program to need to remember what they drew where.


If that’s the case, what other object with coordinates would you reference on a canvas to determine whether it was clicked?


You 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?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: