Add logo to rendered image

canvas.js

@@ -5,6 +5,16 @@ let width = canvas.width;
 let height = canvas.height;
 let fontSize = 60;
 
+let get = function(url, cb) {
+  let xmlHttp = new XMLHttpRequest();
+  xmlHttp.onreadystatechange = function() {
+    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+      cb(xmlHttp.responseText);
+  }
+  xmlHttp.open("GET", url, true);
+  xmlHttp.send(null);
+}
+
 let draw = function() {
   let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
   let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
@@ -28,6 +38,16 @@ let draw = function() {
   ctx.fillStyle = fgColor;
   ctx.fillText(fillText, width * 0.08, height * 0.2 + fontSize);
 
+  //Draw picto
+  get('/imgs/1.svg', function(res) {
+    let img = new Image;
+    let imgXml = res.replace(/#FFD201/g, fgColor);
+    img.src = 'data:image/svg+xml;base64,' + btoa(imgXml);
+    img.addEventListener('load', function() {
+      ctx.drawImage(img, 0, 0);
+    }, false);
+  });
+
   // Add footer
   ctx.fillStyle = 'white';
   ctx.fillRect(0, height * 0.85, width, height * 0.15);

imgs/1.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="413px"
+	 viewBox="0 0 600 413" style="enable-background:new 0 0 600 413;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFD201;}
+	.st1{fill:#497ED5;}
+</style>
+<path class="st0" d="M10,301v37h35.7C29.3,331.1,16.3,317.7,10,301z"/>
+<path class="st0" d="M590,47V10h-35.7C570.7,16.9,583.7,30.3,590,47z"/>
+<g id="path2858_1_">
+	<g>
+		<path class="st1" d="M544,357v10.2c2.4-4.2,6-7.7,10.2-10.2H544z M581.8,357c4.2,2.4,7.8,6,10.2,10.2V357H581.8z M568,358.7
+			c-12.4,0-22.4,10-22.4,22.4s10,22.4,22.4,22.4s22.4-10.1,22.4-22.5C590.5,368.7,580.4,358.7,568,358.7z M563.4,369.6h18.1v3.8H575
+			l-0.6,7.9c-0.1,1.4-0.2,2.5-0.2,3.5c0,2.4,0.3,3.9,0.9,4.4c0.6,0.5,1.3,0.8,2.2,0.8c1.8,0,2.8-1,3.2-3.1h1.3
+			c-0.6,4.9-2.7,7.4-6.4,7.4c-1.7,0-3-0.5-4.1-1.4c-1-1-1.5-2.4-1.5-4.3c0-1.2,0.2-3.9,0.6-7.9l0.8-7.7h-5.7c0,0-0.9,11.2-1.4,14.1
+			c-0.5,2.9-1.1,4.8-1.8,5.6c-0.6,0.8-1.5,1.3-2.7,1.3c-0.9,0-1.6-0.2-2.2-0.7c-0.6-0.5-0.9-1.1-0.9-1.8c0-0.7,0.5-1.7,1.5-3
+			c1.5-1.8,2.6-3.7,3.3-5.7c0.7-2,1.6-9.3,1.6-9.3h-1.8c-1.6,0-2.8,0.3-3.6,1c-0.8,0.6-1.6,1.6-2.4,2.8h-1.5
+			c0.5-1.9,1.3-3.4,2.1-4.6c0.9-1.2,1.8-2,2.7-2.4C559.4,369.8,561.1,369.6,563.4,369.6z M592,394.8c-2.4,4.2-6,7.8-10.2,10.2H592
+			V394.8z M544,394.8V405h10.2C550,402.6,546.4,399,544,394.8L544,394.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="392.5,206.2 394.1,205.6 381.9,250.6 410.5,258.3 428.1,192.7 436,189.8 421.4,151.1 377.9,167.5 		
+			"/>
+		<path class="st0" d="M449.6,184.6c13.6-5.1,96.9-1.2,96.9-1.2l-38-100.7c0,0-59.7,57.9-73.5,63.1L449.6,184.6z"/>
+		<path class="st0" d="M426.3,143.2c-2,0.7-3,3-2.2,5l15.9,42c0.7,2,3,3,5,2.2c2-0.7,3-3,2.2-5l-15.9-42
+			C430.5,143.5,428.3,142.4,426.3,143.2z"/>
+		<path class="st0" d="M524.6,116.2l11.9,31.5c2.3-3.6,2.3-10.6-0.4-17.8C533.4,122.6,528.8,117.4,524.6,116.2z"/>
+	</g>
+</g>
+</svg>