title: Drawing text with an outer stroke with HTML5's canvas
body: <p>I'm currently using HTML5's canvas to render a number of strings using the fillText method. This works fine, but I'd also like to give each string a 1px black outer stroke. Unfortunately the strokeText function seems to apply an inner stroke. To counter this, I've written a drawStrokedText function that achieves the effect I'm after. Unfortunately it's horrible slow (for obvious reasons).</p>
  
  <p>Is there a fast, cross-browser way of achieving a 1px outer stroke using native canvas functionality?</p>
  
  <pre><code>drawStrokedText = function(context, text, x, y)
  {
      context.fillStyle = "rgb(0,0,0)";
      context.fillText(text, x-1, y-1);
      context.fillText(text, x+1, y-1);
      context.fillText(text, x-1, y);
      context.fillText(text, x+1, y);
      context.fillText(text, x-1, y+1);
      context.fillText(text, x+1, y+1);
  
      context.fillStyle = "rgb(255,255,255)";
      context.fillText(text, x, y);
  };
  </code></pre>
  
  <p>Here's an example of the effect at work:</p>
  
  <p><img src="https://i.stack.imgur.com/AOp1c.png" alt="enter image description here"></p>