mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
162 lines
4.3 KiB
HTML
162 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Canvas Text Examples</title>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Canvas Text Examples</h1>
|
|
<p><i>The red boxes are the measured text rects</i></p>
|
|
|
|
<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);
|
|
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="canvas5" width="1000" style="border: 1px solid black;"></canvas><br><br>
|
|
|
|
<script>
|
|
(function () {
|
|
const canvas = document.getElementById('canvas5');
|
|
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>
|