title: canvas image gets blurry
body: <p><a href="https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/" rel="nofollow noreferrer">https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/</a> here fiddle link..<br><br>what    i am trying to do is to show the same output as the highcharts show    when it is exported in PDF format or SVG format, infact in this code    i have used the same function that is used to generate SVG file of    Highcharts the output of that seems proper to me <br><br> but the problem    arises when i pass that variable into canvg.js file calling canvg at function that time the output of the image gets blurry  <br><br> where i want the output    to remain same as it is without pixels getting blurred as it is same    in the highcharts pdf. as i have to display that image of chart in a pdf file so please help. code is as below.</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svgres = chart.getSVG();
  var svgArr = [],
     top = 0,
     height = 0,
     width = 0,
     col=0;
     svgCustDim = 400;
     var svgWidth = 600,
     svg = svgres.replace('&lt;svg', '&lt;g transform="translate(' + col * svgWidth + ',' + top  + ')" ');
     svg = svg.replace('&lt;/svg&gt;', '&lt;/g&gt;');
     svg = '&lt;svg height="' + svgCustDim + '" width="' + svgCustDim*(3)+ '" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;' + svg + '&lt;/svg&gt;';
  canvg('canvas', svg);
  var canvas = document.getElementById('canvas');    
  return canvas.toDataURL("image/jpeg");</code></pre>
  </div>
  </div>
  </p>