Merge image + text into canvas into image

You need todataURL (check doc) but doesn't work on chrome

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
<div>
<button ng-click="generatepics()" style="height:30px;width:100px">
Generate
</button>
</div>
  <div ng-repeat="n in fields" id="{{'test' + $index}}">
   <canvas id="{{'canvas' + $index}}" style="border:2px solid black;position:relative;font-family:'Montserrat script=all rev=1';" width="1594" height="110"></canvas>
  </div>
  
   <div ng-repeat="n in fields" id="{{'outercontent'+$index}}">
    <svg xmlns='http://www.w3.org/2000/svg' width='1594' height='110'>
      <foreignObject width='100%' height='100%'>
        <div xmlns='http://www.w3.org/1999/xhtml' class="image">
            <span class="test" style="position:absolute;top:94px;left:649px;font-size:61%;color:#050F7B;z-index:9000;font-weight:500;font-family:'Montserrat';">Consulter nos docteurs en pharmacie au {{n.sNoTelephone}}</span>   
        </div>
      </foreignObject>
    </svg>
  </div>
  
  
</div>


<img src="https://www.leclercdrive.dev.its.dnsi/intehtml/Tests/sc_bernay.jpg" alt="Smiley face" height="110" width="1594" id="myimg">

CSS

.image {
  width: 1594px;
  height: 110px;
  position: relative;
  background:url('https://www.leclercdrive.dev.its.dnsi/intehtml/Tests/sc_bernay.jpg');
}

.test{
  font-family:'Montserrat';
  color:#050F7B;
}

JavaScript

var myApp = angular.module('myApp', []);
var canvas = [];
var ctx = [];
var data = [];
var myimg = [];
var DOMURL = [];
var img = [];
var svg = [];
var url = [];
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.fields = [{'sNoPointLivraison':'163511', 'sNoTelephone':'02 23 42 29 03'},
{'sNoPointLivraison':'025303', 'sNoTelephone':'02 43 53 72 99'},
{'sNoPointLivraison':'202202', 'sNoTelephone':'02 96 78 86 86'},
{'sNoPointLivraison':'156001', 'sNoTelephone':'01 34 71 14 25'},
{'sNoPointLivraison':'099111', 'sNoTelephone':'01 69 96 12 51'},
{'sNoPointLivraison':'094901', 'sNoTelephone':'02 41 83 54 54'},
{'sNoPointLivraison':'069402', 'sNoTelephone':'01 47 18 63 56'},
{'sNoPointLivraison':'017701', 'sNoTelephone':'01 60 21 75 91'},
{'sNoPointLivraison':'159201', 'sNoTelephone':'01 46 49 44 16'},
{'sNoPointLivraison':'133101', 'sNoTelephone':'05 61 79 04 02'},
{'sNoPointLivraison':'045731', 'sNoTelephone':'03 82 58 84 91'},
{'sNoPointLivraison':'068801', 'sNoTelephone':'03 29 06 38 18'},
{'sNoPointLivraison':'021501', 'sNoTelephone':'04 71 20 10 00'},
{'sNoPointLivraison':'020901', 'sNoTelephone':'05 61 02 68 68'},
{'sNoPointLivraison':'082403', 'sNoTelephone':'05 53 35 75 75'},
{'sNoPointLivraison':'129411', 'sNoTelephone':'01 64 05 97 11'},
{'sNoPointLivraison':'045302', 'sNoTelephone':'02 43 09 20 35'},
{'sNoPointLivraison':'123111', 'sNoTelephone':'05 61 25 37 99'},
{'sNoPointLivraison':'099101', 'sNoTelephone':'01 60 86 42 50'},
{'sNoPointLivraison':'137602', 'sNoTelephone':'02 35 92 18 57'},
{'sNoPointLivraison':'015811', 'sNoTelephone':'03 86 71 84 10'},
{'sNoPointLivraison':'011602', 'sNoTelephone':'05 45 83 45 83'},
{'sNoPointLivraison':'053701', 'sNoTelephone':'02 47 32 53 20'},
{'sNoPointLivraison':'137711', 'sNoTelephone':'01 60 05 29 51'},
{'sNoPointLivraison':'040211', 'sNoTelephone':'03 23 74 93 29'},
{'sNoPointLivraison':'044001', 'sNoTelephone':'05 58 05 54 42'},
{'sNoPointLivraison':'133501', 'sNoTelephone':'02 23 52 09...