Rendering html content to canvas

Question

I'm developing windows store apps using html5/javascript i need to capture my screen but there is no direct api to render screen. so i have used html2canvas.js to render html content to canvas and saved it as bitmap using winjs but html2canvas.js doesn't render rotated div in my screen though it can render rotated image.

how to render rotated div from html to canvas using tml2canvas or any other answer will be greatly appreciated.please help me

Thanks

Answer 1

You cannot render arbitrary HTML to the canvas.

There are some libraries that approximate it, but that's all you've got for options for now.

There has been some discussion since at least 2009 about rendering "HTML document fragments" to the canvas, but no browser has seriously considered implementing anything like it yet.

To quote the HTML Canvas specification:

Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas.

(Source: WHATWG Spec)

Answer 2

Simon's answer incorrectly states that you cannot render arbitrary HTML to an HTML Canvas. Here is an article from Mozilla Dev Network that teaches you how to do just that.

Technically it's not arbitrary HTML, because it's got cross-domain restrictions, and you can't include iframes, but those are pretty minor missing pieces compared to what your question asks for.