how to show html2canvas 'canvas' in new extJS dialog/panel?

Question

I'm working with html2canvas, getting canvas value here:

 makeScreenshot: function(button)
 {
     debugger;
     //window.location.href = "mai lto:mail@example.org";

     html2canvas(document.body, {
         onrendered: function(canvas) {
             document.body.appendChild(canvas);
         },
         width: 600,
         height: 600
     });
 },

How can I present it in some window, dialog or panel of extjs? Are there some possibilities to change a size of screenshot?

I want something like that! it wrong by me...

 makeScreenshot: function(button)
    {
        debugger;
        //window.location.href = "mai lto:mail@example.org";

        var screenshotHtml;
         html2canvas(document.body, {
             onrendered: function(canvas) {

                 screenshotHtml = document.body;

            }
        });

        var win = new Ext.Window({
            title: 'Screenshot',
            width: 1024,
            height: 640,
            resizable: true,
            autoScroll: true,
            preventBodyReset: true,
            html: screenshotHtml
        });
        win.show();
    },

Answer 1

Here is quick example of how I did it.

I basically converted it to a data url and set the image size.

The canvas part:

buttons: [{
        text: 'Login',
        handler: function (button) {
            var win = button.up('window');
            html2canvas(document.body, {
                onrendered: function (canvas) {
                    var c = win.down('form container'),
                        img = new Image();

                    img.height = 100;
                    img.src = canvas.toDataURL("image/png");

                    c.getEl().dom.appendChild(img);
                }
            });
        }
    }]

UPDATE

Here is a new fiddle

You could simplify your function to:

makeScreenshot: function (button) {
    debugger;
    //window.location.href = "mailto:mail@example.org";

    html2canvas(document.body, {
        onrendered: function (canvas) {
            new Ext.Window({
                title: 'Screenshot',
                width: 500,
                height: 400,
                resizable: true,
                autoScroll: true,
                preventBodyReset: true,
                html: '<img src="' +canvas.toDataURL("image/png") +'" height="200"/>'
            }).show();
        }
    });
}

I resized the image and set it to height=200 you can set a height/width to your preference like you can do for every image. Also for the fiddle I set the window to 500*400 else I couldn't see the whole window.