Pdfmake: Getting Uncaught (in promise): invalid image, images dictionary should contain dataURL entries (or local file paths in node.js) while using it with angular2

[NikhilRadadiya]

I'm trying to generate pdf in my angular2 app, which contains dynamic data and images from APIs.

createPdf(): void {
    html2canvas(document.getElementById('main'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 763,
                }]
            };
            pdfMake.createPdf(docDefinition).download("web.pdf");
        }
    });

Getting this error
EXCEPTION: Uncaught (in promise): invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

if I console.log(canvas) I get <canvas width="1366" height="0">
as It has dynamic data, height can't be fixed.
Can you please help me out here?

[NikhilRadadiya]

Added <canvas></canvas> at the end of ther component.html and it worked.
I think it was having problem with finding canvas image

[monikajuneja16]

i m getting the same error and unable to find where to add .