how to convert my html div to canvas without using html2canvas?

Question

i need to convert my html div to canvas and i am using html2canvas right now but it only captures the visible part of the window. i mean to say it is not capture the whole dive which has horizontal scroll.

So is there any way to capture whole div with horizontal scroll or any suggestion in html2canvas for the same.

here is the code i used

var element = document.getElementsByClassName('ppm_portlet_data');

    html2canvas(element[0], { width: element[0].offsetWidth, height: element[0].offsetHeight }).then(function (canvas) {
            console.log(canvas.toDataURL());
            Canvas2Image.saveAsPNG(canvas);
            console.log(canvas.width, canvas.height);
         });

Please post the code on which you're working – vrintle Oct 03 '18 at 06:30 — vrintle, Oct 03 '18 at 06:30
i have added please review it – Rahul Dudharejiya Oct 03 '18 at 07:58 — Rahul Dudharejiya, Oct 03 '18 at 07:58

vrintle · Answer 1 · 2018-10-04T08:11:18.013

You have to use scrollWidth & scrollHeight and set overflow: visible; in order to get content that is not visible.

Working Example

const div = document.querySelector('#content');
div.innerText = div.innerText.split(' ').join(''); // just for overflowing content

div.addEventListener('click', event => {
    html2canvas(div, { width: div.scrollWidth, height: div.scrollHeight }).then(canvas => {
        document.body.appendChild(canvas);
        console.log(canvas.width, canvas.height); // outputs greater width than browser width
    });
});

#content {
    overflow: visible; /* make overflow visible to capture */
    word-wrap: nowrap;
}

<body>
    <div id='content'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    </div>

  <script type="text/javascript" src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>
</body>

the canvas height and width are same as the scroll height and width but the image is cutting or captured just shown in the window screen — Rahul Dudharejiya, Oct 04 '18 at 07:10
thanks for the solution, scrollWidth & scrollHeight helped me to solve the issue i was facing. — JEEVAN GEORGE ANTONY, Oct 10 '18 at 12:37
I just want to use vanilla js, convert HTML to canvas, then canvas to an image — xgqfrms, Aug 02 '19 at 05:25
[Sorry dude!](https://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element) — vrintle, Aug 03 '19 at 14:51

how to convert my html div to canvas without using html2canvas?

1 Answers1

Working Example