title: textAlign Property in HTML5 Canvas not working properly in IE 11
body: <p>I am trying to make javascript fill text inside canvas and I want it to be center aligned, it is working well in Chrome and Firefox but behaving weirdly in IE, here is the code</p>
  
  <pre><code>    ctx.drawImage(background,space,0,500,500);
  
      ctx.fillStyle="#FFF";
      ctx.font="40px Droid Arabic Kufi";
      ctx.textAlign = 'center';
      ctx.direction = 'rtl';
      ctx.textBaseline = 'middle';          
      if (x == '') {x = 'شعورك تجاه بيتك سيظهر هنا'}
      firstLineHeight = wrapText(ctx, x, 250, 200, 400, lineHeight);
      ctx.font="20px Droid Arabic Kufi";
      if (ss == '') {sss = 'من: اسمك سيظهر هنا'}
      else {sss = 'من: ' +  ss}
      wrapText(ctx, sss, 250, 250+((firstLineHeight-1)*30), 400, lineHeight);
  
  
  
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
  
      var words = text.split(' ');
      var line = '';
      linesCount = 1;   
      for(var n = 0; n &lt; words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
          if (testWidth &gt; maxWidth &amp;&amp; n &gt; 0) {
              context.fillText(line, x, y);
              line = words[n] + ' ';
              y += lineHeight;
              linesCount++;
          }
          else {
              line = testLine;
          }
      }
  
      context.fillText(line, x, y+10);
      return linesCount;
  
  }
  </code></pre>
  
  <p><a href="http://musakhalil.com/jotun-2/create/" rel="noreferrer" title="Here is a link">Here is a link here</a></p>
  
  <p>Edited (Screenshots):</p>
  
  <p><a href="https://i.stack.imgur.com/FtYpT.png" rel="noreferrer">Chrome</a></p>
  
  <p><a href="https://i.stack.imgur.com/Bj2ky.png" rel="noreferrer">IE</a></p>