SVG Image not converted properly to Canvas using canvg

Question

Original SVG Chart

Rendered Canvas Chart

This is the code I am using to convert to canvas

svg = $('svg').parent().html()
canvg('canvas', svg)
canvas = document.getElementById("canvas")
img_PNG = "<img src='#{canvas.toDataURL()}' />"

$('.chart').html(img_PNG)

Kindly help in sorting out this issue.

Answer 1

Pass the canvas element to canvg

svg = $('svg').parent().html()
canvas = document.getElementById("canvas")
canvg(canvas, svg)
img_PNG = "<img src='#{canvas.toDataURL()}' />"

$('.chart').html(img_PNG)