RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 21:37:35 +00:00
Code Issues Activity Actions

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

Browse source 
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.
This commit is contained in:
Bastiaan van der Plaat 2023-08-03 12:18:17 +02:00 • committed by Andreas Kling
parent e689422564
commit 220e34b69d
9 changed files with 159 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Userland/Libraries/LibWeb/HTML/Canvas/CanvasPathDrawingStyles.idl
View file

@ -1,13 +1,6 @@
// https://html.spec.whatwg.org/multipage/canvas.html#canvaslinecap
enum CanvasLineCap { "butt", "round", "square" };
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
interface mixin CanvasPathDrawingStyles {

2
Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
View file

@ -80,6 +80,8 @@ public:
Bindings::ImageSmoothingQuality image_smoothing_quality { Bindings::ImageSmoothingQuality::Low };
float global_alpha = { 1 };
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 const& drawing_state() const { return m_drawing_state; }

33
Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h Normal file
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
Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.idl Normal file
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")
};