LibWeb: Implement CanvasRenderingContext2D direction property

When direction is 'rtl':
  - textAlign='start' now aligns text to the right
  - textAlign='end' now aligns text to the left

Fixes the FIXME at CanvasRenderingContext2D.cpp:283

Libraries/LibWeb/HTML/Canvas/CanvasState.h

@@ -102,6 +102,7 @@ public:
         RefPtr<Gfx::FontCascadeList const> current_font_cascade_list { nullptr };
         Bindings::CanvasTextAlign text_align { Bindings::CanvasTextAlign::Start };
         Bindings::CanvasTextBaseline text_baseline { Bindings::CanvasTextBaseline::Alphabetic };
+        Bindings::CanvasDirection direction { Bindings::CanvasDirection::Inherit };
     };
     DrawingState& drawing_state() { return m_drawing_state; }
     DrawingState const& drawing_state() const { return m_drawing_state; }

Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h

@@ -27,6 +27,9 @@ public:
     Bindings::CanvasTextBaseline text_baseline() const { return my_drawing_state().text_baseline; }
     void set_text_baseline(Bindings::CanvasTextBaseline text_baseline) { my_drawing_state().text_baseline = text_baseline; }
 
+    Bindings::CanvasDirection direction() const { return my_drawing_state().direction; }
+    void set_direction(Bindings::CanvasDirection direction) { my_drawing_state().direction = direction; }
+
 protected:
     CanvasTextDrawingStyles() = default;
 

Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.idl

@@ -3,7 +3,7 @@
 // https://html.spec.whatwg.org/multipage/canvas.html#canvastextalign
 // enum CanvasTextAlign { "start", "end", "left", "right", "center" };
 // enum CanvasTextBaseline { "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" };
-enum CanvasDirection { "ltr", "rtl", "inherit" };
+// enum CanvasDirection { "ltr", "rtl", "inherit" };
 enum CanvasFontKerning { "auto", "normal", "none" };
 enum CanvasFontStretch { "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded" };
 enum CanvasFontVariantCaps { "normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps" };
@@ -16,7 +16,7 @@ interface mixin CanvasTextDrawingStyles {
     attribute DOMString font; // (default 10px sans-serif)
     attribute CanvasTextAlign textAlign; // (default: "start")
     attribute CanvasTextBaseline textBaseline; // (default: "alphabetic")
-    [FIXME] attribute CanvasDirection direction; // (default: "inherit")
+    attribute CanvasDirection direction; // (default: "inherit")
     [FIXME] attribute DOMString letterSpacing; // (default: "0px")
     [FIXME] attribute CanvasFontKerning fontKerning; // (default: "auto")
     [FIXME] attribute CanvasFontStretch fontStretch; // (default: "normal")

Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp

@@ -286,15 +286,39 @@ Gfx::Path CanvasRenderingContext2D::text_path(Utf16String const& text, float x,
     }
 
     // Apply text align
-    // FIXME: CanvasTextAlign::Start and CanvasTextAlign::End currently do not nothing for right-to-left languages:
-    //        https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textalign-start
-    // Default alignment of draw_text is left so do nothing by CanvasTextAlign::Start and CanvasTextAlign::Left
+    // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textalign
+    // The direction property affects how "start" and "end" are interpreted:
+    // - "ltr" or "inherit" (default): start=left, end=right
+    // - "rtl": start=right, end=left
+
+    // Determine if we're in RTL mode
+    bool is_rtl = drawing_state.direction == Bindings::CanvasDirection::Rtl;
+
+    // Center alignment is the same regardless of direction
     if (drawing_state.text_align == Bindings::CanvasTextAlign::Center) {
         transform = Gfx::AffineTransform {}.set_translation({ -text_width / 2, 0 }).multiply(transform);
     }
-    if (drawing_state.text_align == Bindings::CanvasTextAlign::End || drawing_state.text_align == Bindings::CanvasTextAlign::Right) {
+    // Handle "start" alignment
+    else if (drawing_state.text_align == Bindings::CanvasTextAlign::Start) {
+        // In RTL, "start" means right-aligned (translate by full width)
+        if (is_rtl) {
+            transform = Gfx::AffineTransform {}.set_translation({ -text_width, 0 }).multiply(transform);
+        }
+        // In LTR, "start" means left-aligned (no translation needed - default)
+    }
+    // Handle "end" alignment
+    else if (drawing_state.text_align == Bindings::CanvasTextAlign::End) {
+        // In RTL, "end" means left-aligned (no translation needed)
+        if (!is_rtl) {
+            // In LTR, "end" means right-aligned (translate by full width)
+            transform = Gfx::AffineTransform {}.set_translation({ -text_width, 0 }).multiply(transform);
+        }
+    }
+    // Explicit "left" and "right" alignments ignore direction
+    else if (drawing_state.text_align == Bindings::CanvasTextAlign::Right) {
         transform = Gfx::AffineTransform {}.set_translation({ -text_width, 0 }).multiply(transform);
     }
+    // Left is the default - no translation needed
 
     // Apply text baseline
     // FIXME: Implement CanvasTextBaseline::Hanging, Bindings::CanvasTextAlign::Alphabetic and Bindings::CanvasTextAlign::Ideographic for real

Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl

@@ -41,6 +41,7 @@ enum CanvasLineJoin { "round", "bevel", "miter" };
 // FIXME: This should be in CanvasTextDrawingStyles.idl but then it is not exported
 enum CanvasTextAlign { "start", "end", "left", "right", "center" };
 enum CanvasTextBaseline { "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" };
+enum CanvasDirection { "ltr", "rtl", "inherit" };
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d
 [Exposed=Window]