direction property

The direction property sets the direction of text drawn using the fillText or the strokeText methods. Takes one of the possible values: ltr (left to right), rtl (right to left), inherit (inherited). The default value is inherit (for Arabic and Hebrew it will be rtl as they are written from right to left, and for all others - ltr).

Syntax

context.direction = ltr, rtl or inherit;

Example

Let's write some text and give it different directions using the direction property:

<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);

direction property

Syntax

Example

See also