title: How to add ChartJS code in Html2Pdf to view image
body: <p>I am using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">Chart.js</a>. </p>
  
  <p>This is my php file and I have used javascript through which I am simply creating a chart and creating chart image after that. </p>
  
  <pre><code>&lt;script&gt;
  
              function done(){
  
                      var url=myLine.toBase64Image();
                      document.getElementById("url").src=url;
              }
  
  
          var MONTHS = [&lt;?php echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?&gt;];
  
  
          var config = {
            type: 'line',
            data: {
  
              labels: [&lt;?php echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?&gt;],
  
              datasets: [{
                label: "&lt;?php echo $asx_code ?&gt;",
                backgroundColor: '#ff6384', 
                borderColor:'#ff6384', 
  
                data: [&lt;?php echo '"' . implode('","', array_reverse($close_price_arr)) . '"' ?&gt;],
                fill: false,
              }]
            },
            options: {
                 bezierCurve : false,
        animation: {
          onComplete: done
        },
              responsive: true,
              title: {
                display: true,
                text: ''
              },
              tooltips: {
                mode: 'index',
                intersect: false,
              },
              hover: {
                mode: 'nearest',
                intersect: true
              },
              scales: {
                xAxes: [{
                  display: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Month'
                  }
                }],
                yAxes: [{
                  display: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Value'
                  }
                }]
              }
            }
          };
  
  
            var ctx = document.getElementById('canvascode').getContext('2d');
            window.myLine = new Chart(ctx, config);
  
  
          document.getElementById('randomizeData').addEventListener('click', function() {
            config.data.datasets.forEach(function(dataset) {
              dataset.data = dataset.data.map(function() {
                return randomScalingFactor();
              });
  
            });
  
            window.myLine.update();
          });
  
          var colorNames = Object.keys(window.chartColors);
  
        &lt;/script&gt;
  </code></pre>
  
  <p>This is working absolutely fine but now I am stuck doing the same thing in <a href="https://github.com/spipu/html2pdf" rel="nofollow noreferrer">html2pdf</a> . I want to include couple of <code>JS</code> files and generate my chart using <code>script</code> tag and then put image into my PDF file. </p>
  
  <p>This is what I have done without any luck. </p>
  
  <pre><code>&lt;?php 
  require __DIR__.'/vendor/autoload.php';
  
  use Spipu\Html2Pdf\Html2Pdf;
  use Spipu\Html2Pdf\Exception\Html2PdfException;
  use Spipu\Html2Pdf\Exception\ExceptionFormatter;
  
  
  $html2pdf = new Html2Pdf();
  $html2pdf-&gt;pdf-&gt;IncludeJS('Chart.bundle.js');
  $html2pdf-&gt;pdf-&gt;IncludeJS('chart_utils.js');
  
  
  
  
  $asx_code = 'CHK';
  
  $url = 'https://www.asx.com.au/asx/1/share/' . $asx_code . '/prices?interval=daily&amp;count=365';
    //  Initiate curl
  $ch = curl_init();
  // Disable SSL verification
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  // Will return the response, if false it print the response
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  // Set the url
  curl_setopt($ch, CURLOPT_URL, $url);
  // Execute
  $result = curl_exec($ch);
  // Closing
  curl_close($ch);
  
  // Will dump a beauty json :3
  $record_decode = json_decode($result);
  
  $close_date_arr = array();
  $close_price_arr = array();
  
  
      foreach ($record_decode-&gt;data as $current_data) {
  
          $close_price_arr[] = $current_data-&gt;close_price;
  
          $close_date_arr[] = date('F Y', strtotime($current_data-&gt;close_date));
  
  
      }
  
  $str = '&lt;canvas id="canvascode" style="display:none"&gt;&lt;/canvas&gt;
  &lt;img id="url" style="width:400px; height:400px" /&gt;';
  
  ?&gt;
  
  &lt;script&gt;
  
          function done(){
  
                  var url=myLine.toBase64Image();
                  document.getElementById("url").src=url;
          }
  
  
      var MONTHS = [&lt;?php echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?&gt;];
  
  
      var config = {
        type: 'line',
        data: {
  
          labels: [&lt;?php echo '"' . implode('","', array_reverse($close_date_arr)) . '"' ?&gt;],
  
          datasets: [{
            label: "&lt;?php echo $asx_code ?&gt;",
            backgroundColor: '#ff6384', 
            borderColor:'#ff6384', 
  
            data: [&lt;?php echo '"' . implode('","', array_reverse($close_price_arr)) . '"' ?&gt;],
            fill: false,
          }]
        },
        options: {
             bezierCurve : false,
    animation: {
      onComplete: done
    },
          responsive: true,
          title: {
            display: true,
            text: ''
          },
          tooltips: {
            mode: 'index',
            intersect: false,
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {
            xAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Month'
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Value'
              }
            }]
          }
        }
      };
  
  
        var ctx = document.getElementById('canvascode').getContext('2d');
        window.myLine = new Chart(ctx, config);
  
  
      document.getElementById('randomizeData').addEventListener('click', function() {
        config.data.datasets.forEach(function(dataset) {
          dataset.data = dataset.data.map(function() {
            return randomScalingFactor();
          });
  
        });
  
        window.myLine.update();
      });
  
      var colorNames = Object.keys(window.chartColors);
  
    &lt;/script&gt;
  
   &lt;?php  
  $html2pdf-&gt;writeHTML($str);
  $html2pdf-&gt;output();
  
  ?&gt;
  </code></pre>
  
  <p>When I try to generate PDF file, I am getting an error saying, </p>
  
  <blockquote>
    <p>Fatal error: Uncaught Spipu\Html2Pdf\Exception\HtmlParsingException: The html tag [canvas] is not known by Html2Pdf. You can create it and push it on the Html2Pdf GitHub project. in /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php:1435 Stack trace: #0 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1043): Spipu\Html2Pdf\Html2Pdf->_executeAction(Object(Spipu\Html2Pdf\Parsing\Node)) #1 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(749): Spipu\Html2Pdf\Html2Pdf->_setNewPositionForNewLine(NULL) #2 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1415): Spipu\Html2Pdf\Html2Pdf->_setNewPage() #3 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(1401): Spipu\Html2Pdf\Html2Pdf->_executeAction(Object(Spipu\Html2Pdf\Parsing\Node)) #4 /var/www/html/htmlpdf/vendor/spipu/html2pdf/src/Html2Pdf.php(595): Spipu\Html2Pdf\Html2Pdf->_makeHTMLcode() #5 /var/www/html/htmlpdf/test.php(138): Spipu\Html2Pdf\Html2Pdf->writeHTML('
  </blockquote>
  
  <p>Can someone guide me how can I generate my script here and put only my image into PDF.</p>