I'm trying to use html2canvas do what it says on the tin, but it keeps creating a canvas with a width and height of zero. I'm doing this:

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
    onrendered:function(newCanvas){
        document.getElementById("image").appendChild(newCanvas);
    }
});

And when I print HTMLStringContainer it shows <div><p>hello world</p></div>, which looks correct.

Snippet

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer, {
  onrendered: function(newCanvas) {
    document.getElementById("image").appendChild(newCanvas);
  }
});

<script src=".4.1/html2canvas.js"></script>
<div id="image"></div>

I'm trying to use html2canvas do what it says on the tin, but it keeps creating a canvas with a width and height of zero. I'm doing this:

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
    onrendered:function(newCanvas){
        document.getElementById("image").appendChild(newCanvas);
    }
});

And when I print HTMLStringContainer it shows <div><p>hello world</p></div>, which looks correct.

Snippet

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer, {
  onrendered: function(newCanvas) {
    document.getElementById("image").appendChild(newCanvas);
  }
});

<script src="https://github./niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<div id="image"></div>

Also, jsfiddle: http://jsfiddle/4077wxLj/

• javascript
• html
• canvas
• html2canvas

Share Improve this question Follow asked Dec 15, 2014 at 21:42 user773737user773737 4

• It looks like for html2canvas to render, it needs to be in the document (like, a child of document.body) – soktinpk Commented Dec 15, 2014 at 21:47
• html2canvas needs to be in the document, or the canvas it creates needs to be in the document? – user773737 Commented Dec 15, 2014 at 21:48
• No the first. Try doing document.body.appendChild(HTMLStringContainer). It should work. – soktinpk Commented Dec 15, 2014 at 21:50
• 1 See jsfiddle/prankol57/3k4rngfL – soktinpk Commented Dec 15, 2014 at 21:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The element to render as a canvas needs to be in the DOM, such as a child of document.body, before it can be rendered.