I’ve seen many examples of using canvas or the html2canvas library, but this method takes a screenshot of a certain element instead of what is actually being displayed in the browser. For example, in this example, https://codepen.io/GDur/pen/eYBLeLM, even if I set the video as opacity: 0 to hide it from being displayed on the webpage, screenshot of the video can still be taken.

How can I take a screenshot of, say, a <div>, of what is actually being displayed at the moment?