title: Drawing img containing SVG source with canvas to get Data URL
body: <p>I ultimately want to get a data URI of an SVG graphic, and I am trying to do this by adding the SVG source to an image element, drawing the image with canvas, and then </p>
  
  <p>In this sample <a href="http://jsfiddle.net/fYAAf/1/" rel="nofollow">jsFiddle</a>, it fails when trying to draw the canvas, what am I missing?</p>
  
  <p>I believe this should work in Firefox, and not Chrome, due to a security restriction.</p>
  
  <pre><code>var image = new Image();
  var xml = '&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="1291px" height="1006px" viewBox="0 0 491871 383286"&gt;&lt;rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"&gt;&lt;/rect&gt;&lt;g transform="translate(6858 12192) scale(1.309375)"&gt;&lt;g id="editor-ged1ef149_00"&gt;&lt;g&gt;&lt;/g&gt;&lt;g id="editor-ged1ef149_00-bg"&gt;&lt;g&gt;&lt;/g&gt;&lt;path fill="#FFFFFF" fill-opacity="1" d="M 0 0 L 365760 0 365760 274320 0 274320 Z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g id="editor-ged1ef149_01"&gt;&lt;g&gt;&lt;/g&gt;&lt;path d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"&gt;&lt;/path&gt;&lt;g direction="ltr" style="opacity: 0.8;"&gt;&lt;g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,21945,31712.5209903717)"&gt;&lt;g&gt;&lt;g id="editor-ged1ef149_01-paragraph-0"&gt;&lt;g&gt;&lt;g class="sketchy-text-background"&gt;&lt;/g&gt;&lt;g class="sketchy-text-content"&gt;&lt;g class="sketchy-text-content-text" transform="translate(0 43.34375)"&gt;&lt;text x="0px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision"&gt;Click&lt;/text&gt;&lt;text x="128.34375px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision"&gt;to&lt;/text&gt;&lt;text x="186.6875px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision"&gt;add&lt;/text&gt;&lt;text x="285.03125px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision"&gt;title&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;rect style="opacity: 0;"&gt;&lt;/rect&gt;&lt;rect style="opacity: 1;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;path d="M 18186.157517899763 10911.694510739857 L 347573.84248210024 10911.694510739857 347573.84248210024 56595.32219570406 18186.157517899763 56595.32219570406 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"&gt;&lt;/path&gt;&lt;path d="M 21336 14033.51953125 L 344424.0076446533 14033.51953125 344424.0076446533 53657.5209903717 21336 53657.5209903717 Z" pointer-events="all"&gt;&lt;/path&gt;&lt;path d="M 21945 31712.5209903717 L 162926.90625 31712.5209903717 162926.90625 53048.5209903717 21945 53048.5209903717 Z" pointer-events="all"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;g id="editor-ged1ef149_02"&gt;&lt;g&gt;&lt;/g&gt;&lt;path d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"&gt;&lt;/path&gt;&lt;g direction="ltr" style="opacity: 0.8;"&gt;&lt;g pointer-events="none" transform="matrix(381,0,0,381,21945,67665)"&gt;&lt;g&gt;&lt;g id="editor-ged1ef149_02-paragraph-0"&gt;&lt;g&gt;&lt;g class="sketchy-text-background"&gt;&lt;/g&gt;&lt;g class="sketchy-text-content"&gt;&lt;g class="sketchy-text-content-text" transform="translate(0 44.671875)"&gt;&lt;text x="0px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision"&gt;Click&lt;/text&gt;&lt;text x="98.125px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision"&gt;to&lt;/text&gt;&lt;text x="142.25px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision"&gt;add&lt;/text&gt;&lt;text x="220.375px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision"&gt;text&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;rect style="opacity: 0;"&gt;&lt;/rect&gt;&lt;rect style="opacity: 1;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;path d="M 18186.157517899763 63869.78520286396 L 347573.84248210024 63869.78520286396 347573.84248210024 262608.1145584726 18186.157517899763 262608.1145584726 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"&gt;&lt;/path&gt;&lt;path d="M 21336 67056 L 344424.0076446533 67056 344424.0076446533 259668.00018310547 21336 259668.00018310547 Z" pointer-events="all"&gt;&lt;/path&gt;&lt;path d="M 21945 70713 L 130291.875 70713 130291.875 91287 21945 91287 Z" pointer-events="all"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;g id="editor-ged1ef149_05"&gt;&lt;g&gt;&lt;path stroke="#5da2ff" stroke-opacity="0.6" stroke-width="1925.9140811455848" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;path fill="#3D85C6" fill-opacity="1" stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g id="editor-ged1ef149_06"&gt;&lt;g&gt;&lt;/g&gt;&lt;path fill="#FF0000" fill-opacity="1" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"&gt;&lt;/path&gt;&lt;path fill="#cc0000" fill-opacity="1" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"&gt;&lt;/path&gt;&lt;path stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"&gt;&lt;/path&gt;&lt;path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"&gt;&lt;/path&gt;&lt;g direction="ltr"&gt;&lt;g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,59119.9988,140863.9374)"&gt;&lt;g&gt;&lt;g id="editor-ged1ef149_06-paragraph-0"&gt;&lt;g&gt;&lt;g class="sketchy-text-background"&gt;&lt;/g&gt;&lt;g class="sketchy-text-content"&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;rect style="opacity: 0;"&gt;&lt;/rect&gt;&lt;rect style="opacity: 1;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;path d="M 59119.9988 140863.9374 L 59119.9988 140863.9374 59119.9988 148864.9374 59119.9988 148864.9374 Z" pointer-events="all"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" pointer-events="none" d="M 238747.87589498807 125848.21002386636 L 238747.87589498807 192773.26968973747 127303.10262529833 192773.26968973747 127303.10262529833 125848.21002386636 Z"&gt;&lt;/path&gt;&lt;path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 182880 125848 L 182880 120029"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 1163.9140811455848 0 C 1163.9140811455848 642.811997130027 642.8119971300271 1163.9140811455848 7.126682895371086e-14 1163.9140811455848 -642.8119971300268 1163.9140811455848 -1163.9140811455845 642.8119971300271 -1163.9140811455848 1.4253365790742172e-13 -1163.9140811455848 -642.8119971300268 -642.8119971300273 -1163.9140811455845 -2.1380048686113256e-13 -1163.9140811455848 642.8119971300267 -1163.9140811455848 1163.9140811455845 -642.8119971300273 1163.9140811455848 -2.8506731581484343e-13" transform="translate(182880,120028.63961813843)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,125848.21002386636)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,125848.21002386636)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,159310.73985680193)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,192773.26968973747)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,192773.26968973747)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,192773.26968973747)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,159310.73985680193)"&gt;&lt;/path&gt;&lt;path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,125848.21002386636)"&gt;&lt;/path&gt;&lt;/g&gt;&lt;defs&gt;&lt;filter id="myblur" filterUnits="userSpaceOnUse"&gt;&lt;feGaussianBlur in="SourceAlpha" stdDeviation="1524"&gt;&lt;/feGaussianBlur&gt;&lt;/filter&gt;&lt;/defs&gt;&lt;/svg&gt;';
  image.src = 'data:image/svg+xml,' + xml; 
  document.querySelector('#container').appendChild(image);
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);
  image.src = canvas.toDataURL();
  </code></pre>