JsPDF, Html2Canvas for loop keeps adding same image

Question

i'm currently trying to make a Canvas of a lot of Html tables to store them in a PDF file.

I'm doing a ForEach loop to make a canvas of and when it's about to finish i save and download the pdf document.

The problem is that when i download the pdf it shows me the first image in every page.

If for example i have 5 tables in my document, the pdf comes up with 5 pages but every page displays the first canvas created, it doesn't add the newer ones.

Let me show you my code.

<script type="text/javascript">
//This is the array i use to store base64 of each element
var PdfImages = [{'base':null}];
PdfImages.splice(0,1);

function ToPDF(){
    $("#someContainer").css("background","#fff");
 //AgregarTabla is another object array i have to store the id's of every
 //table i previously created in html

    $.each(AgregarTabla,function(i){
        var elem = $("#a"+AgregarTabla[i].GrupoID);

        html2canvas(elem,{
            onrendered: function(canvas){
                var data = canvas.toDataURL("img/jpeg");
                PdfImages.push({'base':data});
                doc.addImage(data,"jpeg",0,0,0,0,'Octonyan');   
                doc.addPage();

                data = null;

                if(i == AgregarTabla.length-1){
                    doc.save("test.pdf");
                }
            }
        });//Fin canvas
    });


}

</script>

if i use window.open(data) it opens up a new tab with the new image, and every tab shows me the different canvas i created based in the tables of my html. But when the PDF document is downloaded it always shows me the first canvas i created in every page.

Example