canvas image gets blurry

Question

https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/ here fiddle link..

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

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

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.

---

var svgres = chart.getSVG();
var svgArr = [],
   top = 0,
   height = 0,
   width = 0,
   col=0;
   svgCustDim = 400;
   var svgWidth = 600,
   svg = svgres.replace('<svg', '<g transform="translate(' + col * svgWidth + ',' + top  + ')" ');
   svg = svg.replace('</svg>', '</g>');
   svg = '<svg height="' + svgCustDim + '" width="' + svgCustDim*(3)+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
canvg('canvas', svg);
var canvas = document.getElementById('canvas');    
return canvas.toDataURL("image/jpeg");

Answer 1

The version of canvg used in the demo page on github is buggy. If i take the script from here https://github.com/canvg/canvg/blob/master/canvg.js and paste it in the fiddle it works fine.

You can read more about it here https://github.com/canvg/canvg/issues/486.

Also your canvas is a lot bigger than the image, you can take the chart width and height so that the canvas is the same dimension as the chart.

svgCustDim = chart.chartHeight;
var svgWidth = chart.chartWidth,
svg = svgres.replace('<svg', '<g');
svg = svg.replace('</svg>', '</g>');
svg = '<svg height="' + svgCustDim + '" width="' + svgWidth+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';

Here is a fiddle with the canvg.js taken from the url above and the changes so that your canvas is the same dimension as your chart https://jsfiddle.net/9yktct3z/6/

Note that it appear that the minified version (canvg.min.js) is

if you want a bigger resolution image remove the height and width from you chart container

<div id="container" style="margin: 0 auto"></div>

and set them in the chart option, i used 2000*2000 but you play around with the values

chart: {
    height: 2000,
    width: 2000,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},

here is the full fiddle https://jsfiddle.net/9yktct3z/10/