mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 18:57:35 +00:00
LibWeb: Use paths for text in CRC2D (if possible)
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:
parent
774119bb57
commit
f19b17e089
5 changed files with 124 additions and 5 deletions
46
Tests/LibWeb/Ref/canvas-text.html
Normal file
46
Tests/LibWeb/Ref/canvas-text.html
Normal 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
9
Tests/LibWeb/Ref/reference/canvas-text-ref.html
Normal 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
BIN
Tests/LibWeb/Ref/reference/images/canvas-text-ref.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Loading…
Add table
Add a link
Reference in a new issue