You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
<!DOCTYPE html><body><canvasid="canvas" width="480" height="500"></canvas><script>varcanvas=document.getElementById("canvas");varctx=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 pngvarbuffer=canvas.toDataURL("image/png");varimg=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
The text was updated successfully, but these errors were encountered:
semohr
added a commit
to semohr/node-canvas
that referenced
this issue
Feb 2, 2024
I looked into this myself for a bit and found that the getBaselineAdjustment function was missing the top, hanging and ideographic baselines.
After adding them the overlap looks way better but is still off by a small margin. Especially the top baseline shows some visual differences. Maybe someone has some more insights on this?
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
andbottom
option align with the JavaScript canvas api whereastop
,middle
andhanging
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
HTML
Your Environment
canvas@2.11.2 on Ubuntu 22.04.3 LTS (jammy)
node@v18.12.1
The text was updated successfully, but these errors were encountered: