textAlign Proprietà in HTML5 Canvas non funziona correttamente in IE 11

Question

Sto cercando di inserire testo javascript nel canvas e voglio che sia allineato al centro, funziona bene in Chrome e Firefox ma si comporta stranamente in IE, ecco il codice

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 < words.length; n++) { 
    var testLine = line + words[n] + ' '; 
    var metrics = context.measureText(testLine); 
    var testWidth = metrics.width; 
     if (testWidth > maxWidth && n > 0) { 
      context.fillText(line, x, y); 
      line = words[n] + ' '; 
      y += lineHeight; 
      linesCount++; 
     } 
     else { 
      line = testLine; 
     } 
    } 

    context.fillText(line, x, y+10); 
    return linesCount; 

} 

Here is a link here

Edited (Screenshots):

Chrome

IE

Answer 1

Verifica questo:

<canvas id="myCanvas" dir="rtl"></canvas>

uso dir="rtl" direttamente elemento canvas ..