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);
:
See also
-
the
textBaselineproperty
that aligns text vertically -
the
textAlignproperty
that aligns text horizontally
