Incorrect border color in corners when drawing rectangles with border color with opacity < 1

[macjohnny]

What did you do?

Draw a rectangle with a color with opacity < 1 for border (e.g. outline='#0000ffaa')

What did you expect to happen?

The border color should be homogenous, and not altered by the fill color, if set.

What actually happened?

The border color is different in the corners, probably due to overlapping line segments.
Moreover, when a fill color is set, the border color is changed due to the overlap of the border and fill rectangle.

What are your OS, Python and Pillow versions?

• OS: Windows 10
• Python: 3.8
• Pillow: 8.0.1

Example

Code

import PIL.Image
import PIL.ImageDraw

image = PIL.Image.new(mode='RGB', size=(500, 500), color='#ffffff')
draw = PIL.ImageDraw.ImageDraw(image, mode='RGBA')
draw.rectangle(xy=((100,100), (200,200)),
               fill='#ffff00',
               outline='#0000ffaa',
               width=10)
draw.rectangle(xy=((205,100), (305,200)),
               outline='#0000ffaa',
               width=10)

image.save('image.png')

Result

Related Sources

Pillow/src/PIL/ImageDraw.py

Lines 255 to 258 in d374015

	if fill is not None:
	self.draw.draw_rectangle(xy, fill, 1)
	if ink is not None and ink != fill and width != 0:
	self.draw.draw_rectangle(xy, ink, 0, width)

Pillow/src/_imaging.c

Lines 3171 to 3180 in d374015

	n = ImagingDrawRectangle(
	self->image->image,
	(int)xy[0],
	(int)xy[1],
	(int)xy[2],
	(int)xy[3],
	&ink,
	fill,
	width,
	self->blend);

Pillow/src/libImaging/Draw.c

Lines 724 to 729 in d374015

	for (i = 0; i < width; i++) {
	draw->hline(im, x0, y0 + i, x1, ink);
	draw->hline(im, x0, y1 - i, x1, ink);
	draw->line(im, x1 - i, y0, x1 - i, y1, ink);
	draw->line(im, x0 + i, y1, x0 + i, y0, ink);
	}

[radarhere]

I've created PR #5183 to fix the corners.

For my part at least, I'm not convinced that a translucent outline shouldn't be drawn on top of the fill color? Seems like that decision could go either way.

[macjohnny]

I've created PR #5183 to fix the corners.

thanks for the quick fix, looks good.

For my part at least, I'm not convinced that a translucent outline shouldn't be drawn on top of the fill color? Seems like that decision could go either way.

the rectangle drawing option in e.g. Skia (https://api.skia.org/classSkCanvas.html#a15a77a3479b8f8731442d4a4ea2772b3) uses the same color for stroke and fill.
the web apis offer two different functions:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect

so I guess it is ok to combine two rectangles if we want to have a translucent outline not overlapping with the fill rectangle.

[radarhere]

Thanks. I think it is best to leave the translucent outline drawing on top of the fill then, for the sake of backwards compatibility.