Question

I am working on a drawing program prototype in C#.

I generate a "brush" image that I blend onto a destination image, following the mouse position. It works, but blending over and over at the same place generates artifacts. In particular, transparent pixels on the brush tend to darken the destination image.

Here is the brush and the destination image with artifacts. On the right are the corresponding alpha channels. Last row shows the correct result when I use a flat brush (a semi-transparent disc).

I made a sample program illustrating the issue.

public static Bitmap GenerateBrush(double radius, Func<double, double, double> curve)
{
    int npx = (int)Math.Ceiling(radius) * 2 + 1;
    Bitmap bmp = new Bitmap(npx, npx, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
    for (int ix = 0; ix < npx; ix++) {
        for (int iy = 0; iy < npx; iy++) {
            double fx = 2.0 * ix / (double)(npx - 1) - 1.0;
            double fy = 2.0 * iy / (double)(npx - 1) - 1.0;
            double res = curve(fx, fy);
            bmp.SetPixel(ix, iy, Color.FromArgb((int)(res * 255), 255, 255, 255));
        }
    }
    return bmp;
}

static void Main(string[] args)
{
    var bmpDest = new Bitmap(200, 200, PixelFormat.Format32bppArgb);
    var graphDest = Graphics.FromImage(bmpDest);
    graphDest.Clear(Color.FromArgb(0, 255, 255, 255));

    var bmpSrc = GenerateBrush(40, delegate(double x, double y) {
        double d = Math.Max(1.0 - Math.Sqrt(x * x + y * y), 0.0);
        return 0.5 + Math.Sin((d - 0.5) * Math.PI) / 2;
    });
    
    var im = new ImageAttributes();
    im.SetColorMatrix(new ColorMatrix(
        new float[][] {
        new float[] { 1, 0, 0, 0, 0 },
        new float[] { 0, 1, 0, 0, 0 },
        new float[] { 0, 0, 0, 0, 0 },
        new float[] { 0, 0, 0, 0.3f, 0 },
        new float[] { .0f, .0f, .0f, .0f, 1 }
        }
    ));

    int nsteps = 2000;
    for (int i = 0; i < nsteps; i++) {
        var t = i / (float)nsteps;
        var xpos = 60 + (int)(Math.Sin(t*Math.PI*40) * 50);
        var ypos = 60 + (t>0.5 ? 20: -20);
        graphDest.DrawImage(bmpSrc, new Rectangle(xpos, ypos, 100, 100), 0, 0, 100, 100, GraphicsUnit.Pixel, im);
    }

    bmpDest.Save(@"test.png");
}

It seems to me like it could be due to a precision issue in the way GDI+ blends transparent images. Any thoughts?

— Edit

Same problem without color matrix (removing the last argument in DrawImage()):

— Edit 2

It seems like no-one has an answer for this – is the question not clear enough ?

Answer 1

Yes, truncation errors are accumulating. You might try using PixelFormat.Format32bppPArgb mode for the images, but I’m not sure it will help.

The sure-fire cure is to accumulate the brush stroke into a single-channel image and then use that result as a mask to paint on your canvas.