We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb: Add Canvas Context2D basic text align and text baseline support

Add the CanvasTextDrawingStyles mixin with the textAlign and
textBaseline attributes. Update fill_text in CanvasRenderingContext2D
to move the text rect by the text align and text baseline attributes.
Wrote a simple HTML example to showcase the new features.
Bastiaan van der Plaat 1 year ago
parent
e689422564
commit
220e34b69d
9 changed files with 159 additions and 9 deletions
Unified View Show Diff Stats
  1. 66 0
      Base/res/html/misc/canvas-text.html
  2. 2 0
      Userland/Libraries/LibWeb/Forward.h
  3. 0 7
      Userland/Libraries/LibWeb/HTML/Canvas/CanvasPathDrawingStyles.idl
  4. 2 0
      Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
  5. 33 0
      Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
  6. 22 0
      Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.idl
  7. 25 0
      Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
  8. 3 1
      Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
  9. 6 1
      Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl

+ 66 - 0
Base/res/html/misc/canvas-text.html
View File 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+<meta charset="UTF-8">
 
+<title>Canvas Text Examples</title>
 
+</head>
 
+<body>
 
+
 
+<h1>Canvas Text Examples</h1>
 
+
 
+<em>Canvas text-align</em><br>
 
+<canvas id="canvas0" style="border: 1px solid black;"></canvas><br><br>
 
+
 
+<script>
 
+(function () {
 
+    const canvas = document.getElementById('canvas0');
 
+    const ctx = canvas.getContext('2d');
 
+
 
+    ctx.strokeStyle = 'red';
 
+    ctx.beginPath();
 
+    ctx.moveTo(canvas.width / 2, 0);
 
+    ctx.lineTo(canvas.width / 2, canvas.height);
 
+    ctx.stroke();
 
+
 
+    ctx.font = '16px sans-serif';
 
+    ctx.textBaseline = 'top';
 
+
 
+    const alignments = ['left', 'center', 'right', 'start', 'end'];
 
+    let y = 8;
 
+    for (const alignment of alignments) {
 
+        ctx.textAlign = alignment;
 
+        ctx.fillText(`Text align: ${alignment}`, canvas.width / 2, y);
 
+        y += 16 + 8;
 
+    }
 
+})();
 
+</script>
 
+
 
+<em>Canvas text-baseline</em><br>
 
+<canvas id="canvas1" width="1000" style="border: 1px solid black;"></canvas><br><br>
 
+
 
+<script>
 
+(function () {
 
+    const canvas = document.getElementById('canvas1');
 
+    const ctx = canvas.getContext('2d');
 
+
 
+    ctx.strokeStyle = 'red';
 
+    ctx.beginPath();
 
+    ctx.moveTo(0, canvas.height / 2);
 
+    ctx.lineTo(canvas.width, canvas.height / 2);
 
+    ctx.stroke();
 
+
 
+    ctx.font = '12px sans-serif';
 
+    ctx.textAlign = 'left';
 
+
 
+    const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
 
+    let x = 8;
 
+    for (const baseline of baselines) {
 
+        ctx.textBaseline = baseline;
 
+        ctx.fillText(`Baseline: ${baseline}`, x, canvas.height / 2);
 
+        x += canvas.width / baselines.length;
 
+    }
 
+})();
 
+</script>
 
+
 
+</body>
 
+</html>

+ 2 - 0
Userland/Libraries/LibWeb/Forward.h
View File 

@@ -36,6 +36,8 @@ class OptionConstructor;
 
 enum class AudioContextLatencyCategory;
 
 enum class AudioContextLatencyCategory;
 
 enum class CanPlayTypeResult;
 
 enum class CanPlayTypeResult;
 
 enum class CanvasFillRule;
 
 enum class CanvasFillRule;
 
+enum class CanvasTextAlign;
 
+enum class CanvasTextBaseline;
 
 enum class DOMParserSupportedType;
 
 enum class DOMParserSupportedType;
 
 enum class EndingType;
 
 enum class EndingType;
 
 enum class ImageSmoothingQuality;
 
 enum class ImageSmoothingQuality;

+ 0 - 7
Userland/Libraries/LibWeb/HTML/Canvas/CanvasPathDrawingStyles.idl
View File 

@@ -1,13 +1,6 @@
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvaslinecap
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvaslinecap
 
 enum CanvasLineCap { "butt", "round", "square" };
 
 enum CanvasLineCap { "butt", "round", "square" };
 
 enum CanvasLineJoin { "round", "bevel", "miter" };
 
 enum CanvasLineJoin { "round", "bevel", "miter" };
 
-enum CanvasTextAlign { "start", "end", "left", "right", "center" };
 
-enum CanvasTextBaseline { "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" };
 
-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" };
 
-enum CanvasTextRendering { "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision" };
 
 
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles
 
 interface mixin CanvasPathDrawingStyles {
 
 interface mixin CanvasPathDrawingStyles {

+ 2 - 0
Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
View File 

@@ -80,6 +80,8 @@ public:
 
         Bindings::ImageSmoothingQuality image_smoothing_quality { Bindings::ImageSmoothingQuality::Low };
 
         Bindings::ImageSmoothingQuality image_smoothing_quality { Bindings::ImageSmoothingQuality::Low };
 
         float global_alpha = { 1 };
 
         float global_alpha = { 1 };
 
         Optional<CanvasClip> clip;
 
         Optional<CanvasClip> clip;
 
+        Bindings::CanvasTextAlign text_align { Bindings::CanvasTextAlign::Start };
 
+        Bindings::CanvasTextBaseline text_baseline { Bindings::CanvasTextBaseline::Alphabetic };
 
     };
 
     };
 
     DrawingState& drawing_state() { return m_drawing_state; }
 
     DrawingState& drawing_state() { return m_drawing_state; }
 
     DrawingState const& drawing_state() const { return m_drawing_state; }
 
     DrawingState const& drawing_state() const { return m_drawing_state; }

+ 33 - 0
Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
View File 

@@ -0,0 +1,33 @@
 
+/*
 
+ * Copyright (c) 2023, Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
 
+ *
 
+ * SPDX-License-Identifier: BSD-2-Clause
 
+ */
 
+
 
+#pragma once
 
+
 
+#include <LibWeb/HTML/Canvas/CanvasState.h>
 
+
 
+namespace Web::HTML {
 
+
 
+// https://html.spec.whatwg.org/multipage/canvas.html#canvastextdrawingstyles
 
+template<typename IncludingClass>
 
+class CanvasTextDrawingStyles {
 
+public:
 
+    ~CanvasTextDrawingStyles() = default;
 
+
 
+    void set_text_align(Bindings::CanvasTextAlign text_align) { my_drawing_state().text_align = text_align; }
 
+    Bindings::CanvasTextAlign text_align() const { return my_drawing_state().text_align; }
 
+
 
+    void set_text_baseline(Bindings::CanvasTextBaseline text_baseline) { my_drawing_state().text_baseline = text_baseline; }
 
+    Bindings::CanvasTextBaseline text_baseline() const { return my_drawing_state().text_baseline; }
 
+
 
+protected:
 
+    CanvasTextDrawingStyles() = default;
 
+
 
+private:
 
+    CanvasState::DrawingState& my_drawing_state() { return reinterpret_cast<IncludingClass&>(*this).drawing_state(); }
 
+    CanvasState::DrawingState const& my_drawing_state() const { return reinterpret_cast<IncludingClass const&>(*this).drawing_state(); }
 
+};
 
+
 
+}

+ 22 - 0
Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.idl
View File 

@@ -0,0 +1,22 @@
 
+// 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 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" };
 
+enum CanvasTextRendering { "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision" };
 
+
 
+// https://html.spec.whatwg.org/multipage/canvas.html#canvastextdrawingstyles
 
+interface mixin CanvasTextDrawingStyles {
 
+    // FIXME: attribute DOMString font; // (default 10px sans-serif)
 
+    attribute CanvasTextAlign textAlign; // (default: "start")
 
+    attribute CanvasTextBaseline textBaseline; // (default: "alphabetic")
 
+    // FIXME: attribute CanvasDirection direction; // (default: "inherit")
 
+    // FIXME: attribute DOMString letterSpacing; // (default: "0px")
 
+    // FIXME: attribute CanvasFontKerning fontKerning; // (default: "auto")
 
+    // FIXME: attribute CanvasFontStretch fontStretch; // (default: "normal")
 
+    // FIXME: attribute CanvasFontVariantCaps fontVariantCaps; // (default: "normal")
 
+    // FIXME: attribute CanvasTextRendering textRendering; // (default: "auto")
 
+    // FIXME: attribute DOMString wordSpacing; // (default: "0px")
 
+};

+ 25 - 0
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
View File 

@@ -205,7 +205,32 @@ void CanvasRenderingContext2D::fill_text(DeprecatedString const& text, float x,
 
     draw_clipped([&](auto& painter) {
 
     draw_clipped([&](auto& painter) {
 
         auto& drawing_state = this->drawing_state();
 
         auto& drawing_state = this->drawing_state();
 
         auto& base_painter = painter.underlying_painter();
 
         auto& base_painter = painter.underlying_painter();
 
+
 
         auto text_rect = Gfx::FloatRect(x, y, max_width.has_value() ? static_cast<float>(max_width.value()) : base_painter.font().width(text), base_painter.font().pixel_size());
 
         auto text_rect = Gfx::FloatRect(x, y, max_width.has_value() ? static_cast<float>(max_width.value()) : base_painter.font().width(text), base_painter.font().pixel_size());
 
+
 
+        // Apply text align to text_rect
 
+        // 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
 
+        if (drawing_state.text_align == Bindings::CanvasTextAlign::Center) {
 
+            text_rect.translate_by(-text_rect.width() / 2, 0);
 
+        }
 
+        if (drawing_state.text_align == Bindings::CanvasTextAlign::End || drawing_state.text_align == Bindings::CanvasTextAlign::Right) {
 
+            text_rect.translate_by(-text_rect.width(), 0);
 
+        }
 
+
 
+        // Apply text baseline to text_rect
 
+        // FIXME: Implement CanvasTextBasline::Hanging, Bindings::CanvasTextAlign::Alphabetic and Bindings::CanvasTextAlign::Ideographic for real
 
+        //        right now they are just handled as textBaseline = top or bottom.
 
+        //        https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textbaseline-hanging
 
+        // Default baseline of draw_text is top so do nothing by CanvasTextBaseline::Top and CanvasTextBasline::Hanging
 
+        if (drawing_state.text_baseline == Bindings::CanvasTextBaseline::Middle) {
 
+            text_rect.translate_by(0, -base_painter.font().pixel_size() / 2);
 
+        }
 
+        if (drawing_state.text_baseline == Bindings::CanvasTextBaseline::Alphabetic || drawing_state.text_baseline == Bindings::CanvasTextBaseline::Ideographic || drawing_state.text_baseline == Bindings::CanvasTextBaseline::Bottom) {
 
+            text_rect.translate_by(0, -base_painter.font().pixel_size());
 
+        }
 
+
 
         auto transformed_rect = drawing_state.transform.map(text_rect);
 
         auto transformed_rect = drawing_state.transform.map(text_rect);
 
         auto color = drawing_state.fill_style.to_color_but_fixme_should_accept_any_paint_style();
 
         auto color = drawing_state.fill_style.to_color_but_fixme_should_accept_any_paint_style();
 
         base_painter.draw_text(transformed_rect, text, Gfx::TextAlignment::TopLeft, color.with_opacity(drawing_state.global_alpha));
 
         base_painter.draw_text(transformed_rect, text, Gfx::TextAlignment::TopLeft, color.with_opacity(drawing_state.global_alpha));

+ 3 - 1
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
View File 

@@ -28,6 +28,7 @@
 
 #include <LibWeb/HTML/Canvas/CanvasRect.h>
 
 #include <LibWeb/HTML/Canvas/CanvasRect.h>
 
 #include <LibWeb/HTML/Canvas/CanvasState.h>
 
 #include <LibWeb/HTML/Canvas/CanvasState.h>
 
 #include <LibWeb/HTML/Canvas/CanvasText.h>
 
 #include <LibWeb/HTML/Canvas/CanvasText.h>
 
+#include <LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h>
 
 #include <LibWeb/HTML/Canvas/CanvasTransform.h>
 
 #include <LibWeb/HTML/Canvas/CanvasTransform.h>
 
 #include <LibWeb/HTML/CanvasGradient.h>
 
 #include <LibWeb/HTML/CanvasGradient.h>
 
 #include <LibWeb/Layout/InlineNode.h>
 
 #include <LibWeb/Layout/InlineNode.h>
 
@@ -53,7 +54,8 @@ class CanvasRenderingContext2D
 
     , public CanvasImageData
 
     , public CanvasImageData
 
     , public CanvasImageSmoothing
 
     , public CanvasImageSmoothing
 
     , public CanvasCompositing
 
     , public CanvasCompositing
 
-    , public CanvasPathDrawingStyles<CanvasRenderingContext2D> {
 
+    , public CanvasPathDrawingStyles<CanvasRenderingContext2D>
 
+    , public CanvasTextDrawingStyles<CanvasRenderingContext2D> {
 
 
 
     WEB_PLATFORM_OBJECT(CanvasRenderingContext2D, Bindings::PlatformObject);
 
     WEB_PLATFORM_OBJECT(CanvasRenderingContext2D, Bindings::PlatformObject);

+ 6 - 1
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
View File 

@@ -7,6 +7,7 @@
 
 #import <HTML/Canvas/CanvasImageSmoothing.idl>
 
 #import <HTML/Canvas/CanvasImageSmoothing.idl>
 
 #import <HTML/Canvas/CanvasPath.idl>
 
 #import <HTML/Canvas/CanvasPath.idl>
 
 #import <HTML/Canvas/CanvasPathDrawingStyles.idl>
 
 #import <HTML/Canvas/CanvasPathDrawingStyles.idl>
 
+#import <HTML/Canvas/CanvasTextDrawingStyles.idl>
 
 #import <HTML/Canvas/CanvasRect.idl>
 
 #import <HTML/Canvas/CanvasRect.idl>
 
 #import <HTML/Canvas/CanvasState.idl>
 
 #import <HTML/Canvas/CanvasState.idl>
 
 #import <HTML/Canvas/CanvasText.idl>
 
 #import <HTML/Canvas/CanvasText.idl>
 
@@ -14,6 +15,10 @@
 
 
 
 enum ImageSmoothingQuality { "low", "medium", "high" };
 
 enum ImageSmoothingQuality { "low", "medium", "high" };
 
 
 
+// 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" };
 
+
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d
 
 // https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d
 
 [Exposed=Window]
 
 [Exposed=Window]
 
 interface CanvasRenderingContext2D {
 
 interface CanvasRenderingContext2D {
 
@@ -34,5 +39,5 @@ CanvasRenderingContext2D includes CanvasText;
 
 CanvasRenderingContext2D includes CanvasDrawImage;
 
 CanvasRenderingContext2D includes CanvasDrawImage;
 
 CanvasRenderingContext2D includes CanvasImageData;
 
 CanvasRenderingContext2D includes CanvasImageData;
 
 CanvasRenderingContext2D includes CanvasPathDrawingStyles;
 
 CanvasRenderingContext2D includes CanvasPathDrawingStyles;
 
-// FIXME: CanvasRenderingContext2D includes CanvasTextDrawingStyles;
 
+CanvasRenderingContext2D includes CanvasTextDrawingStyles;
 
 CanvasRenderingContext2D includes CanvasPath;
 
 CanvasRenderingContext2D includes CanvasPath;

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5