Can you take a "screenshot" of the page using Canvas?

Question

I have a page where we're positioning a bunch of elements using CSS, and changing their "top and left" positions using JS.

I've had reports that these things have been misaligned, but a user has the motive to lie about this to "cheat", so I'm not exactly sure whether they're telling the truth. I'm trying to find a way to figure out whether they're lying or not, and to have some "proof".

I know that Canvas has a method to copy image information from an image element, or another canvas element (kind of a BitBlt operation).

Would it be possible to somehow, with Canvas (or with something else, Flash, whatever), take a "picture" of a piece of the page?
Again, I'm not trying to take information from an <image>. I'm trying to copy what the user sees, which is comprised of several HTML elements positioned absolutely (and I care most about those positions) and somehow upload that to the server.

I understand this can't be done, but maybe I'm missing something.

Any ideas?

Answer 1

Somebody asked a question earlier that's somewhat similar to this. Scroll to the bottom of Youtube and click the "Report a Bug" link. Google's Feedback Tool (Javascript driven), essentially does what you described. Judging by what I looked at of its code, it uses canvas and has a JavaScript-based JPEG encoder which builds a JPG image to send off to Google.

It would definitely be a lot of work, but I'm sure you could accomplish something similar.

Answer 2

If a commercial solution is an option, Check out SnapEngage. Click on the "help" button in top-right to see it in action. Here is a screenshot:-

Setup is pretty straight-forward you just have to copy and paste a few lines of javascript code.

SnapEngage uses a Java Applet to take screenshots, Here is a blog post about how it works.