実行結果

文字が左から右へ行く場合

英語や日本語のように、文字を左から右へ読む言語の場合、canvas要素のスタイルに directionプロパティーがセットされていなければ、CanvasのtextAlign属性の値が "start" と "left" の結果は同じになります。

同様に、CanvasのtextAlign属性の値が "end" と "right" の結果も同じになります。

文字が右から左へ行く場合

canvas要素のスタイルで directionプロパティーに "rtl"、unicode-bidiプロパティーに "bidi-override " をセットすると、Canvas内に描画される文字は強制的に右から左へ描画されます。

<canvas id="c2" width="150" height="200" style="direction:rtl;unicode-bidi:bidi-override;"></canvas>

このとき、CanvasのtextAlign属性の値が "start", "end" の場合は、文字列の描画位置が、前述の「文字が左から右へ行く」場合と反対になります。

コード

/* フォントの種類とサイズをセット */
ctx.font = "20px 'Courier New'";
/* textAlignにstartをセット */
ctx.fillStyle = "black";
ctx.textAlign = "start";
ctx.fillText("start", 75, 30);
/* 補助点 */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(75, 30, 3, 0, Math.PI*2, false);
ctx.fill();
/* textAlignにendをセット */
ctx.fillStyle = "black";
ctx.textAlign = "end";
ctx.fillText("end", 75, 70);
/* 補助点 */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(75, 70, 3, 0, Math.PI*2, false);
ctx.fill();
/* textAlignにleftをセット */
ctx.fillStyle = "black";
ctx.textAlign = "left";
ctx.fillText("left", 75, 110);
/* 補助点 */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(75, 110, 3, 0, Math.PI*2, false);
ctx.fill();
/* textAlignにrightをセット */
ctx.fillStyle = "black";
ctx.textAlign = "right";
ctx.fillText("right", 75, 150);
/* 補助点 */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(75, 150, 3, 0, Math.PI*2, false);
ctx.fill();
/* textAlignにcenterをセット */
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("center", 75, 190);
/* 補助点 */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(75, 190, 3, 0, Math.PI*2, false);
ctx.fill();