SVG to Canvas

HTML

SVG
<svg height="100">
  <rect width="40" height="50" style="fill:blue;" />
  <rect width="20" height="80" style="fill:red;" />
  <circle r="20" cx="50" cy="50" style="fill:yellow;" />
    <path id="bigpath" d="M10 150L8.19290254287321 56.33813448589345S8 46.339995228563964 10.741153002287174 55.95696357716801L11.603674583919723 58.98300508000534S14.344827586206897 68.59997342860939 16.37894260997652 58.8090400680929L18.65554014864417 47.85095041763499S20.689655172413794 38.0600170571185 22.405934937911134 47.91163538948118L26.183577147786405 69.59568131024045S27.03448275862069 74.4799650286214 30.20689655172414 70.66997047147076L30.20689655172414 70.66997047147076S33.37931034482759 66.85997591432013 35.51139837770772 71.3359638969045L36.83957187968175 74.1242580676626S39.724137931034484 80.17995688577588 42.896551724137936 86.08994844293079L42.896551724137936 86.08994844293079S46.06896551724138 91.99994000008572 48.029482202573476 85.58522380941524L50.460997765757426 77.62942197017654S52.41379310344828 71.23996965718621 55.58620689655173 77.11996125719821L57.13250066079506 79.98597903983028S58.758620689655174 82.9999528572102 61.93103448275862 81.70995470006471L61.93103448275862 81.70995470006471S65.10344827586206 80.41995654291922 65.42737011776802 77.0106488184027L71.09456563999501 17.36288515854143S71.44827586206897 13.64005194278296 74.62068965517241 15.620049114215568L74.62068965517241 15.620049114215568S77.79310344827587 17.600046285648176 78.26019337012848 21.31035962530803L83.49240016833662 62.872221209160394S84.13793103448276 67.99997428575102 87.3103448275862 72.07996845718793L87.3103448275862 72.07996845718793S90.48275862068965 76.15996262862483 91.6600953299827 71.12762321374201L94.54955759274182 58.77707411599889S96.82758620689656 49.04000137142662 99.48903028792137 39.40066968278876L100.51096971207865 35.69936588858902S103.17241379310346 26.06003419995116 105.20270491850118 35.85176121545416L108.84251523104335 53.405908265002964S109.51724137931035...

CSS

svg, img, canvas {
  display: block;
}

JavaScript

// http://stackoverflow.com/questions/3768565/drawing-a-svg-file-on-a-html5-canvas

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

var myPath = document.querySelector('#bigpath');
var convertedPath = new Path2D(myPath);

canvas.getContext('2d').stroke(convertedPath);

function dlCanvas() {
  var dt = canvas.toDataURL('image/png'); // << this fails in IE/Edge...

  this.href = dt;
};
document.getElementById('dl').addEventListener('click', dlCanvas, false);