html and Svg to Canvas javascript -

<div id="contents"> <div style="float:left;margin-left:10px;"> <svg></svg> </div> <div style="float:left;margin-left:10px;"> <svg></svg> </div> </div> 

this html code. want convert canvas image.

html2canvas($("#contents"), {   onrendered: function(canvas) {    window.open(canvas.todataurl());    } }); 

i use html2canvas plugin convert image not show svg. solve converting svg tp canvas html2canvas not working

  var $to=$("#maincontents").clone();              $($to).children(".box").each(function() {     var svg = resizearray[$(this).children(".box-content").children().attr("new-id")-1].svg();             var thiscanvas = document.createelement("canvas");             thiscanvas.setattribute("style", "height:" + 100 + "px;width:" + 100+ "px;");              canvg(thiscanvas, svg);              $(this).append(thiscanvas);          });         html2canvas($($to), {       onrendered: function(canvasq) {         var w=window.open(canvasq.todataurl());         w.print();       }     }); 

i can convert svg canvas html2canvas function not working.

you need use canvg library drawing svg temporary canvas , remove canvas once take screenshot using html2canvas.

here link canvg : https://code.google.com/p/canvg/downloads/list

try this:

//find svg elements in $container //$container jquery object of div need convert image. div may contain highcharts along other child divs, etc var svgelements= $container.find('svg');  //replace svgs temp canvas svgelements.each(function () {     var canvas, xml;      canvas = document.createelement("canvas");     canvas.classname = "screenshottempcanvas";     //convert svg xml string     xml = (new xmlserializer()).serializetostring(this);      // removing name space ie throws error     xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');      //draw svg onto canvas     canvg(canvas, xml);     $(canvas).insertafter(this);     //hide svg element     this.classname = "temphide";     $(this).hide(); });  //... //here goes code html2canvas screenshot //...  //after image generated revert temporary changes $container.find('.screenshottempcanvas').remove(); $container.find('.temphide').show().removeclass('temphide');