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.

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

rect() with stroke outline renders 1px wider and taller in P2D #2065

Closed
martinleopold opened this Issue Sep 5, 2013 · 2 comments

Comments

Projects
None yet
4 participants
@martinleopold
Contributor

martinleopold commented Sep 5, 2013

This is the output of multiple rect(x,y,3,3) calls rendered with default P2D.
Black pixels are placed 1px apart to provide a reference. Fill is green, stroke is red.
It seems that the stroke is overlayed starting at the top left corner but extending one extra pixel down and to the right. If this is intended, I wonder what's the reasoning behind it?
screen shot 2013-09-05 at 22 33 15

@boubpopsyteam

This comment has been minimized.

Show comment
Hide comment
@boubpopsyteam

boubpopsyteam Sep 5, 2013

Contributor

I may see an explanation,

Think of where is really the coordinate (x,y) :

First, let's assume it's in the center of the pixel. So the drawing from x to x+3 will fill the pixels x, x+1, x+2, x+3, because there's only 3 pixels between the center of x and x+3.

Second, think as the coordinates are in the upper left corner of the pixel. So that drawing from x to x+3 will fill x, x+1, x+2 (and not the x+3 because this coordinate is on the left edge).

Anyway it seems the renderer uses these 2 different centers in your example.

Contributor

boubpopsyteam commented Sep 5, 2013

I may see an explanation,

Think of where is really the coordinate (x,y) :

First, let's assume it's in the center of the pixel. So the drawing from x to x+3 will fill the pixels x, x+1, x+2, x+3, because there's only 3 pixels between the center of x and x+3.

Second, think as the coordinates are in the upper left corner of the pixel. So that drawing from x to x+3 will fill x, x+1, x+2 (and not the x+3 because this coordinate is on the left edge).

Anyway it seems the renderer uses these 2 different centers in your example.

@ghost ghost assigned codeanticode Sep 5, 2013

@JakubValtar

This comment has been minimized.

Show comment
Hide comment
@JakubValtar

JakubValtar Aug 4, 2015

Contributor

Hi!

If the stroke weight is 1 px, 0.5 px would overlap the edge of the rect and 0.5 px would lay outside of the rect (so total width/height of the rectangle increases by 0.5 + 0.5 = 1 px). We move the stroke 0.5 px down and to the right to align in with pixel grid (otherwise it would be in two pixel columns/rows and would be blurred by antialiasing). We do this to make both strokes and shapes appear sharp in P2D.

Contributor

JakubValtar commented Aug 4, 2015

Hi!

If the stroke weight is 1 px, 0.5 px would overlap the edge of the rect and 0.5 px would lay outside of the rect (so total width/height of the rectangle increases by 0.5 + 0.5 = 1 px). We move the stroke 0.5 px down and to the right to align in with pixel grid (otherwise it would be in two pixel columns/rows and would be blurred by antialiasing). We do this to make both strokes and shapes appear sharp in P2D.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment