Skip to main content
All CollectionsPDF Code Examples
Code Example: <canvas> Element
Code Example: <canvas> Element
Jonathon Fruchte avatar
Written by Jonathon Fruchte
Updated over 7 years ago

<canvas>  elements created by JavaScript are not passed to our PDF rendering engine. This is because the graphical data in a <canvas>  is not stored in the HTML,. A workaround is to extract the canvas data into raw image data before the PDF rendering.

Here is some example code that will likely require some minor modification to work for your document:

  <script>
  docraptorJavaScriptFinished = function() {
    var chartCanvas = document.getElementById("canvas");

    // do not do anything unless the chart is finished rendering
    if(chartCanvas == null || chartCanvas.style.length < 1)
    {
      return false;
    }

    // dump the canvas to an img tag
    var imageElement = document.createElement("img");
    imageElement.style = "width: 100%;";
    imageElement.src = chartCanvas.toDataURL("image/png");
    chartCanvas.remove();
 
    document.body.appendChild(imageElement);
    return true;
  }
  </script>
Did this answer your question?