RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 21:48:13 +00:00
Code Issues Activity Actions

LibWeb: Add Canvas Context2D basic font property support

Browse source
This commit is contained in:
Bastiaan van der Plaat 2023-08-07 21:48:49 +02:00 • committed by Andreas Kling
parent b05fe22d39
commit bba14f6014
7 changed files with 181 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

103
Base/res/html/misc/canvas-text.html
View file

@ -7,15 +7,110 @@
<body>
<h1>Canvas Text Examples</h1>
<p><i>The red boxes are the measured text rects</i></p>
<em>Canvas text-align</em><br>
<canvas id="canvas0" style="border: 1px solid black;"></canvas><br><br>
<em>Canvas font size</em><br>
<canvas id="canvas0" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas0');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
let y = 8;
for (let fontSize = 8; fontSize <= 64; fontSize += 8) {
ctx.font = `${fontSize}px sans-serif`;
const text = `Font size: ${fontSize}px`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, fontSize);
y += fontSize + 8;
}
})();
</script>
<em>Canvas font family</em><br>
<canvas id="canvas1" width="600" height="250" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
const families = ['monospace', 'serif', 'fantasy', 'sans-serif', 'cursive'];
let y = 8;
for (const family of families) {
ctx.font = `32px ${family}`;
const text = `Font family: ${family}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas font weight</em><br>
<canvas id="canvas2" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas2');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
let y = 8;
for (let fontWeight = 100; fontWeight <= 900; fontWeight += 100) {
ctx.font = `${fontWeight} 32px sans-serif`;
const text = `Font weight: ${fontWeight}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas font style</em><br>
<canvas id="canvas3" width="600" height="150" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas3');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
const styles = ['normal', 'italic', 'oblique'];
let y = 8;
for (const style of styles) {
ctx.font = `${style} 32px sans-serif`;
const text = `Font style: ${style}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas text-align</em><br>
<canvas id="canvas4" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas4');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
@ -36,11 +131,11 @@
</script>
<em>Canvas text-baseline</em><br>
<canvas id="canvas1" width="1000" style="border: 1px solid black;"></canvas><br><br>
<canvas id="canvas5" width="1000" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas1');
const canvas = document.getElementById('canvas5');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';