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
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
alphabeticandbottomoption align with the JavaScript canvas api whereastop,middleandhangingdo 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
HTML
Your Environment
canvas@2.11.2 on Ubuntu 22.04.3 LTS (jammy)
node@v18.12.1