create screenshot of webpage using html2canvas (unable to initialize properly)

I am attempting to use to take screenshots of my webpage. I am unable to initialize a canvas element using...

var canvas = $('body').html2canvas();

If I were able to get a proper canvas I would follow with something like

var dataUrl = canvas.toDataURL(); //get's image string;             // display image

Unfortunately, the documentations is very limited IMO. . I do not believe I need to preload as I am not using any dynamic graphics(but am not even getting that far anyways)

I am simply too noob to understand if this guy is having success with screen capturing using html2canvas

I don't seem to be getting any farther than this fellow.. How to upload a screenshot using html2canvas?

My ideal solution would demonstrate how to create screenshot with minimal code. (Copy html to canvas. get toDataURL string. output string)

ANY insight is GREATLY appreciated =)

You should use it this way:

var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();;

It took me few hours to figure it out, how to use it the right way. The {elements:{length:1}} is required, due to incomplete implementation of the plugin, otherwise you'll get an error.

Good luck!

You could also use the following:

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();;

To just get a part of the page you can use it this way:

onrendered: function( canvas ) {
  var img = canvas.toDataURL();

This is what worked for me.

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL();

This created a new window for the screenshot.

I only wanted a portion of my page in the screenshot, specifically a container div. So I did the following:

html2canvas($('#myDiv'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL();

For people looking up the same question, if the above options don't help, hopefully this will.

You can use the following code to capture a screenshot and download the screenshot.

html button creation

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

function definition

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));


note: I have created a html button where I have called the function. test is an attribute and box1 is to get the canvas elements.