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
[email protected] on Ubuntu 22.04.3 LTS (jammy)
[email protected]