<!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>
