title: How to increase resolution on highchart when rendering PDF using jsPDF
body: <p>Basically I want to know,What is the best way render Highchart's charts on PDF?. In my case I use <a href="http://www.highcharts.com/" rel="nofollow">Highcharts</a> with <a href="https://parall.ax/products/jspdf" rel="nofollow">jsPDF</a> to render pdf. But its chart resoution is very low on generated PDF.How I improve resolution on chart</p>
  
  <p>Following code section for creating <strong>canvas</strong> element from <strong>svg</strong>. There is method to get <strong>svg</strong> from <strong>Highchart</strong></p>
  
  <pre><code>(function (H) {
          H.Chart.prototype.createCanvas = function (divId) {
              var svg = this.getSVG(),
                      width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
                      height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
                      canvas = document.createElement('canvas');
  
              canvas.setAttribute('width', width);
              canvas.setAttribute('height', height);
  
              if (canvas.getContext &amp;&amp; canvas.getContext('2d')) {
  
                  canvg(canvas, svg);
  
                  return canvas.toDataURL("image/jpeg");
  
              }
              else {
                  alert("Your browser doesn't support this feature, please use a modern browser");
                  return false;
              }
  
          }
      }(Highcharts));
  </code></pre>
  
  <p>And after that use jsPDF to render PDF in frontend. Use canvas context as image and place that object on the pdf using jsPDF library.The method name is <em>addImage</em> .</p>
  
  <pre><code>var pdfOptions = {
              orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
              unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
              format: "a4"             //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
          }
          var *doc* = new jsPDF(pdfOptions);
  </code></pre>
  
  <p>Create jsPDF object</p>
  
  <pre><code>doc.addPage();
  var imageData = $(this).highcharts().createCanvas();
  doc.addImage(imageData, 'JPEG', left, top, charWidth, chartHeight);
  </code></pre>
  
  <p>add image to <em>doc</em> object, that imageData derived from the canvas element that retured from above <strong><em>createCanvas</em></strong> function.</p>
  
  <pre><code>doc.save('example.pdf');
  </code></pre>
  
  <p>After that save pdf.</p>
  
  <p>In this case frontend highchart pdf generation was success, but chart resolution is very low.
  <em>Is there any posibility to improve resolution on charts in rendered pdf.?</em></p>