Repository navigation
DrawText doesn't align Brush and Pen properly #367
Description
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
DEBUGandRELEASEmode - 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
Activity
CptWesley commentedon Oct 31, 2025
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 commentedon Feb 17, 2026
@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.
Fix #367
JimBobSquarePants commentedon Mar 12, 2026
Can confirm it's not an issue anymore once we merge #377