Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

textBaseline top middle and hanging do not align with javascript canvas api #2343

Open
semohr opened this issue Feb 2, 2024 · 1 comment
Open

textBaseline top middle and hanging do not align with javascript canvas api #2343

semohr opened this issue Feb 2, 2024 · 1 comment

Comments

@semohr
Copy link

semohr commented Feb 2, 2024 •
edited

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.
canvas

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
semohr added a commit to semohr/node-canvas that referenced this issue Feb 2, 2024
@semohr
Added HANGING, IDEOGRAPHIC and TOP textBaseline to adjustments
cbcc3c8 
see Automattic#2343
@semohr
Copy link
Author

semohr commented 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.

canvas

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?

inline double getBaselineAdjustment(PangoLayout* layout, short baseline) {
  PangoRectangle logical_rect;
  pango_layout_line_get_extents(pango_layout_get_line(layout, 0), NULL, &logical_rect);

  double ascent = pango_layout_get_baseline(layout);
  double descent = logical_rect.height - ascent;

  double adjustment;

  switch (baseline) {
  case TEXT_BASELINE_ALPHABETIC:
    adjustment = ascent;
    break;
  case TEXT_BASELINE_MIDDLE:
    adjustment = logical_rect.height / 2.0 + (logical_rect.height - ascent) / 2.0;
    break;
  case TEXT_BASELINE_BOTTOM:
    adjustment = ascent + descent;
    break;
  case TEXT_BASELINE_TOP:
    adjustment = descent;
    break;
  case TEXT_BASELINE_HANGING:
    adjustment = 1.5 * descent;
    break;
  case TEXT_BASELINE_IDEOGRAPHIC:
    adjustment = (ascent + logical_rect.height) / 2.0;
    break;
  default:
    return 0;
  }
  return 1.0 / PANGO_SCALE * adjustment;
}

@semohr semohr mentioned this issue Feb 13, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@semohr