Canvas. Interacting with dom elements on the page

Question

JavaScript

Hello dear!

I must say right away that I am almost not familiar with canvas, but I really want to get acquainted.

Question:

There is such a link here http://m-ms.dk/spaceheroes/ .

Please take 5 minutes of your time and see what is there. If you do everything that is asked there, then it becomes possible to interact (if I understood correctly) with the help of their script with dom elements on any page.

Would you like to know how they did it? Is this a native feature of canvas? Or canvas takes the page and redraws it "in itself" and then works with it as with its own entity? In which direction to look and dig?

Thank you.

Answer 1

In this bookmarklet, the canvas lies on top of all other elements and takes up the entire page area. When the candy flies, you can use the document.elementFromPoint(x, y) method to determine which DOM element is under it ( https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint ?redirectlocale=en-US&redirectslug=DOM%2Fdocument.elementFromPoint ). And then to break it with some effect is a matter of technology.

To answer the question - the canvas and the rest of the DOM do not intersect in any way - the canvas is just one of the nodes of the house-tree, and there is no way to reach the DOM elements from inside the canvas, but sometimes this can be elegantly bypassed, as, for example, in this case.