title: How to display dynamically generated canvas image on other websites
body: <p>Am working on a site which allows users to participate in polls and earn some points. I'd like them to be able to display their username + score + some other stuff on any website, for example their own blog, forum signatures, etc. as an image. Kindof like stackoverflow flair !</p>
  
  <p>Ofcourse, since their scores and other data will keep changing, I'd like the image to be generated dynamically (I am using php). I have got to a point using canvas where the canvas-png image displays fine on my site, but if I try to use the page url as a src in an img tag, the image doesnot show up. </p>
  
  <p>Below is the page which generates the canvas :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="/jscripts/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function()
  {
      var canvas = document.getElementById("c"),
      context = canvas.getContext("2d");
  
      context.fillStyle = "rgb(155, 155, 155)";
      context.fillRect(0, 0, 250, 100);
      context.stroke();
  
      var imgObj = new Image();
      imgObj.onload = function ()
      {            
          // Draw the image on the canvas
          context.drawImage(imgObj, 4, 8, 32, 32);
      }
      imgObj.src="&lt;?=$iUser-&gt;avatar?&gt;";
  
      var username = "Username from php";
      context.fillStyle = "rgb(0, 0, 0)";
      context.font = "18px sans-serif";
      context.fillText(username, 42, 20);
  
      var score = "CGH Score : " + "146";
      context.fillStyle = "rgb(0, 0, 0)";
      context.font = "14px sans-serif";
      context.fillText(score, 42, 40);
  
  
      var img_data=canvas.toDataURL('image/png');
      var img_element="&lt;img src=\"" + img_data + "\" /&gt;";
      $("#c").remove();
      $("head").html("&lt;meta http-equiv=\"content-type\" content=\"image/png\"/&gt;");
      $("body").html(img_element);
  
      //document.body="&lt;img src=\"" + img_data + "\" /&gt;";
  
      //document.write(img_data);
      //var output=img_data.replace(/^data:image\/(png|jpg);base64,/, "");
      //$.post("/show_img/",{image_data:output});
  
  
      //window.location = canvas.toDataURL('image/png');
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;canvas id="c"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>