Create a raster copy of an element using canvas

Question

I created a simple page layout program for a client and would like to provide a thumbnail of pages, such as the page palette in InDesign. Is it possible to use an HTML5 canvas element to create a copy of a single element.

For example, each page is an article tag. I want to copy this article using a canvas and reduce it to say 10%, and then draw it on the screen.

Answer 1

There are no snapshots of parts of the page in the canvas specification in the current method. Firefox extends the canvas element with the drawWindow () method , which accepts the coordinates and dimensions of the area in which you want to take a picture from. However, this method is only available for scripts running with privileges at the chrome level due to security issues. A comment on the method in the code indicates that this may change in the future:

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352

Answer 2

Although this does not use a canvas in Firefox 4+, you can use any HTML element as the background image of another element. Details here: https://developer.mozilla.org/en/CSS/-moz-element