title: How to use Google fonts in Canvas when Drawing DOM objects in SVG?
body: <p>As per Mozilla's documentation, you can draw complex HTML on Canvas like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas" rel="noreferrer">this</a>.</p>
  
  <p><strong>What I can't figure out is a way to make Google fonts work with it.</strong></p>
  
  <p>See this example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
      var ctx    = canvas.getContext('2d');
      
      var data   = '&lt;svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"&gt;' +
                     '&lt;foreignObject width="100%" height="100%"&gt;' +
                       '&lt;div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px;font-family:Pangolin"&gt;' +
                         'test' +
                       '&lt;/div&gt;' +
                     '&lt;/foreignObject&gt;' +
                   '&lt;/svg&gt;';
      
      var DOMURL = window.URL || window.webkitURL || window;
      
      var img = new Image();
      var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
      var url = DOMURL.createObjectURL(svg);
      
      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
      }
      
      img.src = url;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Pangolin" rel="stylesheet"&gt;
  
  &lt;div style="font-size:40px;font-family:Pangolin"&gt;test&lt;/div&gt;&lt;hr&gt;
  &lt;canvas id="canvas" style="border:2px solid black;" width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>