mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 15:17:45 +00:00
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.
This commit is contained in:
parent
e689422564
commit
220e34b69d
9 changed files with 159 additions and 9 deletions
66
Base/res/html/misc/canvas-text.html
Normal file
66
Base/res/html/misc/canvas-text.html
Normal 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>
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
|
@ -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(); }
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
|
@ -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")
|
||||||
|
};
|
|
@ -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));
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue