Repository navigation
textBaseline top middle and hanging do not align with javascript canvas api #2343
Description
Issue or Feature
The textBaseline property does not produce the expected results. I noticed a misalignment between renders of the JavaScript Canvas api and the node-canvas implementation.
It seems like only the alphabetic and bottom option align with the JavaScript canvas api whereas top, middle and hanging do not.
Is that an expected behavior? If yes how can I align text from both implementations?
Steps to Reproduce
I overlayed the JavaScript and node-canvas results of the following scripts. Red text is the expected value using the canvas api and blue text is the results from the node-canvas package.
Node script
import { createCanvas } from "canvas";
import { writeFileSync } from "fs";
function main() {
const canvas = createCanvas(480, 500);
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
["top", "hanging", "middle", "alphabetic", "bottom"].forEach((baseline, index) => {
ctx.textBaseline = baseline;
ctx.fillText(baseline, 10, index * 90 + 10);
ctx.beginPath();
ctx.moveTo(0, index * 90 + 10);
ctx.lineTo(480, index * 90 + 10);
ctx.stroke();
});
const buf = canvas.toBuffer("image/png", { compressionLevel: 3 });
writeFileSync("./canvas_node.png", buf);
}
main();HTML
<!DOCTYPE html>
<body>
<canvas id="canvas" width="480" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.globalAlpha = 0.5;
ctx.fillStyle = "red";
["top", "hanging", "middle", "alphabetic", "bottom"].forEach((baseline, index) => {
ctx.textBaseline = baseline;
ctx.fillText(baseline, 10, index * 90 + 10);
ctx.beginPath();
ctx.moveTo(0, index * 90 + 10);
ctx.lineTo(480, index * 90 + 10);
ctx.stroke();
});
// Get buffer from canvas and convert to png
var buffer = canvas.toDataURL("image/png");
var img = document.createElement("img");
img.src = buffer;
document.body.appendChild(img);
</script>
</body>
</html>Your Environment
canvas@2.11.2 on Ubuntu 22.04.3 LTS (jammy)
node@v18.12.1
Activity
Added HANGING, IDEOGRAPHIC and TOP textBaseline to adjustments
semohr commentedon Feb 2, 2024
I looked into this myself for a bit and found that the
getBaselineAdjustmentfunction was missing thetop,hangingandideographicbaselines.After adding them the overlap looks way better but is still off by a small margin. Especially the
topbaseline shows some visual differences. Maybe someone has some more insights on this?chearon commentedon Aug 16, 2026
I think this is the same problem @asturur was looking at in #1562.
It's easier to fix now but might take some digging... some of the metrics browsers just make up, for example the
<sup>position is hard-coded to something like0.6emin Firefox. Others can be specified in multiple different tables inside the font.