I'm struggling pretty hard with the documentation on the HTML2Canvas script. Specifically the options located here. I've figured out the syntax somewhat by using objects like this: html2canvas(element, {option: value}); but I have no idea what actual values the script is expecting.

My specific goal with this is to have a div that shows on my site that's roughly 1000px x 500px but saves an image double that size. (I want to save a 1920 x 1080 image, but I want the customizable div to fit fortably on the screen while it's built.)

I'm guessing I need to use a bination of the width, height, scale, windowWidth, and windowHeight options, but I can only figure out the value syntax for width and height. Is anyone out there familiar with this script that can point me in the right direction?

I'm struggling pretty hard with the documentation on the HTML2Canvas script. Specifically the options located here. I've figured out the syntax somewhat by using objects like this: html2canvas(element, {option: value}); but I have no idea what actual values the script is expecting.

My specific goal with this is to have a div that shows on my site that's roughly 1000px x 500px but saves an image double that size. (I want to save a 1920 x 1080 image, but I want the customizable div to fit fortably on the screen while it's built.)

I'm guessing I need to use a bination of the width, height, scale, windowWidth, and windowHeight options, but I can only figure out the value syntax for width and height. Is anyone out there familiar with this script that can point me in the right direction?

• javascript
• html2canvas

• Well, window.devicePixelRatio, window.innerWidth and window.innerHeight are all numbers, so I’d try numbers. – Sebastian Simon Commented Jun 6, 2018 at 20:21
• I've tried that, but I'm not having any luck unfortunately. I've tried both 100, and '100px' for example. No luck. Width and height take straight numbers, but it stretches the canvas to the new dimensions while the div doesn't follow... I just had an idea to double up my divs and use percentages on the children. Would still like to understand what the other three options are supposed to acplish though. – Dale Spiteri Commented Jun 6, 2018 at 20:30

1 Answer 1

Here is an example from my own website - I grab the contents of a div on the page, then render it to canvas like this:

var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
    onrendered: function(canvas) {
        var canvas_image = canvas.toDataURL("image/png"), // change output image type here
            img = new Image(); // create a new blank image

        img.src = canvas_image; // set the canvas_image as the new image's source
        img.width = el.offsetWidth; // make the image the same width and height as the target container
        img.height = el.offsetHeight;
        img.onload = function () {
            // do stuff
        });
    },
    width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
    height: <set your height e.g. '500px'>
});

For my purposes, the key property is the onrendered callback, which allows you to call a function after render and store the "on the fly" generated canvas in an image.