mirror of
https://github.com/webgpu/webgpufundamentals.git
synced 2026-05-16 05:41:01 -04:00
cbbf0ff5e1
The tradtional way to do this is to set
```js
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, centerX, centerY);
```
For various reasons this doesn't actually draw "in the center".
Instead we have to measure the text using the canvas API and then
center ourselves.
```
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
const m = ctx.measureText(text);
ctx.fillText(
text,
(canvas.width - m.actualBoundingBoxRight + m.actualBoundingBoxLeft) / 2,
(canvas.height - m.actualBoundingBoxDescent + m.actualBoundingBoxAscent) / 2
);
```
53 lines
1.5 KiB
HTML
53 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
<title>WebGPU Textured Cube Map</title>
|
|
<style>
|
|
@import url(resources/webgpu-lesson.css);
|
|
canvas {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
<script type="module">
|
|
function generateFace(size, {faceColor, textColor, text}) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = faceColor;
|
|
ctx.fillRect(0, 0, size, size);
|
|
ctx.font = `${size * 0.7}px sans-serif`;
|
|
ctx.fillStyle = textColor;
|
|
ctx.textAlign = 'left';
|
|
ctx.textBaseline = 'top';
|
|
const m = ctx.measureText(text);
|
|
ctx.fillText(
|
|
text,
|
|
(size - m.actualBoundingBoxRight + m.actualBoundingBoxLeft) / 2,
|
|
(size - m.actualBoundingBoxDescent + m.actualBoundingBoxAscent) / 2
|
|
);
|
|
return canvas;
|
|
}
|
|
|
|
const faceSize = 128;
|
|
const faceCanvases = [
|
|
{ faceColor: '#F00', textColor: '#0FF', text: '+X' },
|
|
{ faceColor: '#FF0', textColor: '#00F', text: '-X' },
|
|
{ faceColor: '#0F0', textColor: '#F0F', text: '+Y' },
|
|
{ faceColor: '#0FF', textColor: '#F00', text: '-Y' },
|
|
{ faceColor: '#00F', textColor: '#FF0', text: '+Z' },
|
|
{ faceColor: '#F0F', textColor: '#0F0', text: '-Z' },
|
|
].map(faceInfo => generateFace(faceSize, faceInfo));
|
|
|
|
// show the results
|
|
for (const canvas of faceCanvases) {
|
|
document.body.appendChild(canvas);
|
|
}
|
|
</script>
|
|
</html>
|