How to convert highchart to binary image

Question

I'am using highchart for plotting a graph with angular:

HTML:

<highchart id="chart" class="plotchartCntr" config="chart"></highchart>

JS:

$scope.chart = {
    options: {
        chart: {
            type: 'column'
        }
    },
    xAxis: {
        categories: [] // dynamically loaded after search
    },
    yAxis: {
        title: {
            text: 'Counts'
        },
        labels: {
            formatter: function() {
                return this.value
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    series: [] // dynamically loaded after search
}

I have to save this as a image.

My code (got from stack overflow):

var canvas = document.createElement("chart");
canvas.width = 200;
canvas.height = 500;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);

But I am getting error canvas.getContext is not a function.

Please suggest

Answer 1

Thanks, at last I got the answer:

HTML:

<img id="mock" />

JS:

var svg = document.getElementById('chart').children[0].innerHTML;
//svg = chart.getSVG(); 

var base_image = new Image();
svg = "data:image/svg+xml," + svg;
base_image.src = svg;
$('#mock').attr('src', svg);

We can save image tag directly in DB also. Ref. Save highchart to binary image.

Answer 2

 var canvas = document.createElement("chart");

Replace to:

var canvas = document.getElementById("chart");