RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 02:17:34 +00:00
Code Issues Activity Actions

LibWeb: Use paths for text in CRC2D (if possible)

Browse source 
This allows for:

  * Transformed text (e.g. rotated text)
  * Stroked text
  * Filling/stroking text with PaintStyles (e.g. gradients)
  * Squashed/condensed text (via maxWidth parameter)

Fixes part of #22817
This commit is contained in:
MacDue 2024-02-11 17:18:55 +00:00 • committed by Alexander Kalenik
parent 774119bb57
commit f19b17e089
5 changed files with 124 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

46
Tests/LibWeb/Ref/canvas-text.html Normal file
View file

@ -0,0 +1,46 @@
<link rel="match" href="reference/canvas-text-ref.html" />
<html>
<head>
<style>
canvas {
border: 1px solid black;
image-rendering: pixelated;
}
</style>
</head>
<body>
<script>
const canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 280;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.save();
ctx.translate(20, 250);
ctx.rotate(-Math.PI*0.2);
ctx.fillText("Rotated Text!", 10, 40);
ctx.restore();
ctx.strokeText("Stroke Text!", 10, 50);
const gradient = ctx.createLinearGradient(280, 20, 580, 120);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.15,"yellow");
gradient.addColorStop(0.3,"green");
gradient.addColorStop(0.45,"aqua");
gradient.addColorStop(0.6,"blue");
gradient.addColorStop(0.7,"fuchsia");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillText("Gradient Text!", 260, 150);
ctx.fillStyle = "red";
ctx.fillText("Squished Text", 50, 120, 100);
</script>
</body>
</html>

9
Tests/LibWeb/Ref/reference/canvas-text-ref.html Normal file
View file

@ -0,0 +1,9 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="./images/canvas-text-ref.png">

BIN
Tests/LibWeb/Ref/reference/images/canvas-text-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB