title: Download a diagram JOINTJS Image | SVG ==> PNG with Javascript
body: <p>I currently have a problem. When wishes to convert a chart created with JOINTJS image, the elements do not display correctly ...</p>
  
  <p><strong>The diagram:</strong></p>
  
  <p><a href="http://www.hostingpics.net/viewer.php?id=698706graph.png" rel="nofollow">http://www.hostingpics.net/viewer.php?id=698706graph.png</a></p>
  
  <p><strong>Conversion :</strong></p>
  
  <p><a href="http://www.hostingpics.net/viewer.php?id=867158graph2.png" rel="nofollow">http://www.hostingpics.net/viewer.php?id=867158graph2.png</a></p>
  
  <p><strong>Here is my code:</strong></p>
  
  <pre><code>  var canvas = document.getElementById('canvas');
    var svg = document.querySelector('svg');
    var ctx = canvas.getContext('2d');
    var data = (new XMLSerializer()).serializeToString(svg);
    var DOMURL = window.URL || window.webkitURL || window;
  
    var img = new Image();
    var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svgBlob);
  
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
  
      var imgURI = canvas
          .toDataURL('image/png')
          .replace('image/png', 'image/octet-stream');
  
      triggerDownload(imgURI);
    };
  
    img.src = url;
  </code></pre>
  
  <p>After much research, different codes, I still can not find the solution.
  Thanks in advance !</p>