title: Converting DOM elements to an image: words converted to dashes (jQuery, HTML5, SVG)
body: <p>I have a question regarding the process of converting HTML to an image.</p>
  
  <p>I have been using code similar to the code snippet found <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Everything seems to be working fine, except the image I get has turned <b>some</b> of the words into dashes. So, something that might say "submit" on the page will now say "-" in the image. Similarly, something that might say "Have a Suggestion?" on the page will now say "---" in the image. Otherwise, all of the proportions, formatting, and colors are correct. I am only having a problem with some of the text. I am not having problems with text inside textarea tags.  </p>
  
  <pre><code>function createImage() {
  
      var canvas = $('&lt;canvas/&gt;');
      var ctx = canvas[0].getContext("2d");
      var data = "&lt;svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'&gt;" +
                   "&lt;foreignObject width='100%' height='100%'&gt;" +
                     "&lt;div xmlns='http://www.w3.org/1999/xhtml'&gt;" +
                       $("body").html() +
                     "&lt;/div&gt;" +
                   "&lt;/foreignObject&gt;" +
                 "&lt;/svg&gt;";
      var DOMURL = self.URL || self.webkitURL || self;
      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;
      return img;
  }
  </code></pre>
  
  <p>Does anyone have any ideas?</p>