DrawText doesn't align Brush and Pen properly

[CptWesley]

Prerequisites

• I have written a descriptive issue title
• I have verified that I am running the latest version of ImageSharp.Drawing
• I have verified if the problem exist in both DEBUG and RELEASE mode
• I have searched open and closed issues to ensure it has not already been reported

ImageSharp.Drawing version

3.1.12

Other ImageSharp packages and versions

Fonts 2.1.3, Drawing 2.1.7

Environment (Operating system, version and so on)

Windows 11 10.0.26200 Build 26200

.NET Framework version

10

Description

It appears the bug reported in #312 #329 (#330) and fixed in #331 has either not been fully fixed. It still appears to be present in version 2.1.7 when the thickness of the pen is relatively small. I also followed the repro steps on versions 2.1.3 (before #331) and 2.1.4 (after #331) and obtained identical results.

Steps to Reproduce

Given the following code:

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace ConsoleApp;

public static class Program
{
    public static void Main(string[] args)
    {
        using var img = new Image<Rgba32>(512, 72);
        var fontFamily = SystemFonts.Get("Arial");
        var font = fontFamily.CreateFont(64, FontStyle.Regular);

        img.Mutate(ctx =>
        {
            void Draw(float borderThickness, Color color)
            {
                var brush = Brushes.Solid(color);
                var pen = Pens.Solid(Color.Green, borderThickness);

                var text = "Hello, world!";

                ctx.DrawText(
                    text: text,
                    font: font,
                    brush: brush,
                    pen: pen,
                    location: new PointF(0, 0));
            }

            ctx.Fill(Color.White);

            Draw(1, Color.Red);
        });

        img.SaveAsPng("out.png");
    }
}

Results in the following image:

Zoomed in:

Using the following workaround to draw the brush and pen seperately (variant from the one suggested in #329) produces the expected result:

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace ConsoleApp;

public static class Program
{
    public static void Main(string[] args)
    {
        using var img = new Image<Rgba32>(512, 72);
        var fontFamily = SystemFonts.Get("Arial");
        var font = fontFamily.CreateFont(64, FontStyle.Regular);

        img.Mutate(ctx =>
        {
            void Draw(float borderThickness, Color color)
            {
                var brush = Brushes.Solid(color);
                var pen = Pens.Solid(Color.Green, borderThickness);

                var text = "Hello, world!";

                ctx.DrawText(
                    text: text,
                    font: font,
                    brush: brush,
                    location: new PointF(0, 0));

                var offset = borderThickness * -0.5f;

                ctx.DrawText(
                    text: text,
                    font: font,
                    pen: pen,
                    location: new PointF(offset, offset));
            }

            ctx.Fill(Color.White);

            Draw(1, Color.Red);
        });

        img.SaveAsPng("out.png");
    }
}

Images

No response

[CptWesley]

After some more testing, it seems that offsetting the outline by 0.5px seems to do the trick, regardless of borderwidth, but not 100% sure if that's always the case. It could explain why it's only noticeable with very thin outlines.

[JimBobSquarePants]

@CptWesley Sorry for the slow reply and thanks for all that detail!

I've recently rewritten the entire rich text rendering pipeline so I'll see if I can recreate this with my latest code.