direction 속성

속성 direction은 메서드 fillText 또는 메서드 strokeText로 그려진 텍스트의 방향을 지정합니다. 가능한 값 중 하나를 가집니다: ltr (왼쪽에서 오른쪽), rtl (오른쪽에서 왼쪽), inherit (상속됨). 기본값은 inherit입니다 (아랍어와 히브리어의 경우 rtl가 됩니다. 왜냐하면 해당 언어들은 오른쪽에서 왼쪽으로 쓰기 때문이며, 나머지 모든 언어의 경우 - ltr입니다).

구문

컨텍스트.direction = ltr 또는 rtl 또는 inherit;

예제

텍스트를 쓰고 속성 direction을 사용하여 다른 방향을 설정해 봅시다:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "16px arial";
ctx.fillText("text1", 150, 50);
ctx.direction = "rtl";
ctx.fillText("text1", 50, 120);

참고 항목

속성 textBaseline,
수직 방향으로 텍스트를 정렬합니다.
속성 textAlign,
수평 방향으로 텍스트를 정렬합니다.