Suppose I have a div (background set to blue), and inside it, there is a <h1> containing some text in white.

Using the javascript function elementFromPoint(), I can find which element is currently at a given coordinate(x,y), but this function only checks the bounds, and not actual visibility. e.g. if <h1> contains the text "WORLD", then from inside the "O", the background (blue) div is actually visible, but the elementFromPoint() function still detects the <h1> tag there, because it only checks the bounding-box of the <h1>.

Is there any function/library using which I can detect the actually visible object at a point???

02pe7.png