Handling of toDataURL - convert convascontext into canvashtml

Question

I go through my HTML and convert it into Canvas.

for (const element of htmlData) {
    var input = document.getElementById(element);
    allPromises.push(html2canvas(input));
}

In the next step I go througt my array of Promises, try to crop the canvas into a special size and write it into a PDF with jsPDF.

Promise.all(allPromises).then((response) => {
     response.forEach((input) => {
         var croppedImage = cropImg(input);
         imgData = croppedImage.toDataURL('image/jpeg', 1.0);
         insertImg(imgData, imgWidth_mm, imgHeight_mm);
    }
}

The function I use for cropping looks like:

function cropImg(image) {
    var ctx = image.getContext('2d');
    ctx.drawImage(image, 20, 20, 50, 50, 0, 0, 50, 50);
    return ctx;
}

Unfortunatly I get the errormassage: croppedImage.toDataURL is not a function It looks like the .toDataURL function can't deal the raw context of the canvas I give to it. Any suggestions how I can fix this? If I don't crop the Canvas everything is fine.

Answer 1

The code is right, just the values for cropping are wrong.

Edit: somethinghere is right. I habe to pass the image via return image