$scope.setImg = function () {

  var canvas = document.querySelector('#canvas');
  var svg = document.querySelector('#drawingDesktop');
  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 () {

    console.log("Triggered on chrome and firefor but not in safari");

    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);


    var imgURI = canvas
      .toDataURL('image/png')
      .replace('image/png', 'image/octet-stream');

  };

  img.src = url;

}

 <canvas id="canvas" width=800 height=600></canvas>

 <svg id="drawingDesktop" height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-
    width="3"fill="red"/>
 </svg>

 <button ng-click="setImg()">Draw</button>


 Safari Version 11.0.2 (12604.4.7.1.6)