HTML5/Canvas: Web page preview?

Question

Can I use canvas to generate a thumbnail of a web page?

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

What I'd like to do is generate a little thumbnail of everything in the browser window's and display it at the top so that the user can get a preview of what appears at the bottom of the page without having to actually scroll to see it.

Any ideas?

Answer 1

When you handle the xhr response you could clone it and display it at the top in a "preview" element, but shrunken (font-size: 6, shrink images, whatever).

Not sure how big (small) this preview is supposed to be ...

Edit:

If it's too small for text, after you handle the xhr you could measure the elements down there and then create scaled versions and dump them into the preview element too. Set a background-image for "text" blocks that has squiggly lines to indicate what it is, etc. Then clicking them would jump you down to that section of the page ... Sounds interesting actually.

Answer 2

Check this out: http://chikuyonok.ru/u/demo/infoscroller/ May be, it will inspire you.