passing data to html2canvas in angular2

Question

I am trying to use the variable 'problems' inside html2canvas(). This variable is an array of objects.

I can console.log it on the outside of html2canvase() but not on the inside. Is there a way to pass it to the inside?

This is in app.component.ts

    download(){
    console.log("outside -> download() " + this.problems.length);//works
    html2canvas(document.getElementById('graph')).then(function(canvas) {
    console.log("inside -> download() " + this.problems.length);//not working

    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    ...............

    // var dnow = Date.now();
    // var d = new Date(dnow);

    doc.setTextColor(0);
    doc.text(5,5,'date here');//will get date in here
    doc.addImage(img,'JPEG',120,20);
    doc.save('testCanvas.pdf');
    });
  }

Answer 1

scope of this inside html2canvas function is different, so create a reference variable for this outside and use that reference varialbe inside the html2canvas function, the changed code looks like below,

 download(){
    console.log("outside -> download() " + this.problems.length);//works
    var that = this; // assign this to variable that and use it inside html2Canvas function
    html2canvas(document.getElementById('graph')).then(function(canvas) {
    console.log("inside -> download() " + that.problems.length); // now that can be used here

    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();

    doc.setTextColor(0);
    doc.text(5,5,'date here');//will get date in here
    doc.addImage(img,'JPEG',120,20);
    doc.save('testCanvas.pdf');
    });
  }