Printing a Dialog content using Canvas and iFrame

Hi guys,
You know that printing from the browser is a bitch. Even after you've figured out how to put the content you want into the browser, the printing doesn't always work the same on all the browsers (yes! HTML is a standard... my arse). And that's not where all the trouble stop but anyway...

The problem I would like to bring up in this post is printing from a dialog box, which is more complex since we have to somehow extract the visual data from the dialog and then put it in some way that the crippled window.print() method can make sense of it. I mean seriously, have you ever seen such a lame API? print()? that's it? no "what do you want to print?". Throw me a freaking bone here.
Given that we're dealing with a dialog kinda eliminates the possibility to use the print media query, since we're not going to alter the whole page, just a section of it.

I saw many solutions on the web, some offering to save and then clean up the DOM, attach a cloned version of the DOM you actually want to print, and then re-render it all back after printing, which to me sounds like "bla bla bla bad performance sad users bla bla bla".
You know, all kinds of adding classes to elements, removing it then later... oh god.
Of course there is the jQuery plugin which offers to do that but I wasn't in the mode to introduce yet another jQuery pluging so I had to think of something else...

Canvas came to the rescue.
The idea I came up with is to somehow capture the DOM content I wanted to print, convert it into an image, and then create a hidden iFrame bearing the content of this image among other stuff I wanted to be printed. How? canvas can be concerted into an image.
I already had html2canvas library so it wasn't in a need to download any other 3rd party. you can get what it does from it's name, right? good.

Moving forward, here's the actions the code needed to perform (pseudo-code):

• Get the canvas from the HTML elements
• Convert the canvas to an image using the toDataURL('image/png') method
• Create an iFrame dynamically
• Append the iFrame to the DOM 
• Once loaded Set the iframe content with the newly generated image I have
• Send it to printing, by printing the iFrame content only
• Smoke a cigarette

I believe that what's written above should give a good idea on how to implement it.
As for printing the iFrame itself I took a code snippet from some stackoverflow thread but I had to tweak it a bit since Firefox didn't like what I did, for it removed the iFrame before the browser launched it's printing. To overcome this I've used a deferred object, like so:

this.printIframe = function (id) {
var deferred = $q.defer(),
    iframe = $window.frames ? $window.frames[id] : $window.getElementById(id),
    ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
deferred.resolve('done');
return deferred.promise;
};

and this means that I had to listen to the promise in order to remove the iframe from the DOM and not just count on the fact the window.print() is supposed to stop javascript execution...

I think that pretty much sums it up. It might not be the best idea out there so I would love to hear your opinion on it or better if you have a better one.

… and BTW -
I caught this nice AngularJS Weekly magazine (or whatever you would like to call it) on the way. A lot of cool resources and stuff. Pretty nice.

Stay tuned and play on.