HTML5 / Canvas: Preview a webpage?

Question

Can I use canvas to create a thumbnail of a webpage?

I have a webpage that grows in length, vertically, the longer the user on it (via Ajax), requiring the user to scroll vertically to see the new content on the page. (Think of something like a chat.)

What I would like to do is create a small sketch of everything in the browser window and display it at the top so that the user can get a preview of what appears at the bottom of the page, without actually scrolling to see it.

Any ideas?

Answer 1

When you process the xhr response, you can clone it and display it on the top in the Preview element, but shrink (font size: 6, reduce the image, etc.).

Not sure how big (small) this preview should be ...

Edit:

If it is too small for the text, after processing xhr, you can measure the elements there, and then create scaled versions and upload them to the preview element. Set a background image for “text” blocks that have short lines to indicate what it is, etc. Then clicking on them will take you to this section of the page ... It actually sounds interesting.