Aliasing of strokes on canvas size not an even number

[hungerburg]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

p5.js version

p5.js v1.4.1 February 02, 2022

Web browser and version

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0

Operating System

see above

Steps to reproduce this

Steps:

1. create canvas with size not an even number if (dim%2 == 0) dim -= 1;
2. make black stroke
3. make withe stroke exactly covering black stroke
4. aliasing of black stroke remains

Snippet:

see https://myzel.net/prozessuale_poesie/malerei/BifurkationPM_odd.html
see https://myzel.net/prozessuale_poesie/malerei/BifurkationPM.html with a work-around (make canvas size always an even number)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[hungerburg]

Created a self-contained simple version - https://myzel.net/js/p5-canvas-odd.html

Sometimes, it is due to strokeWeight, sometimes I have seen, though, odd numbered canvas size also produces the effect.

PS: Bug sounds a bit harsh. P5.js rocks :)

[limzykenneth]

This is likely due to the quirks of subpixel drawing and related to #4269. Stroke is drawn from the center of a pixel which is why even if you are not using subpixels, the same problem still applies. One way to get around it is to offset drawings by half a pixel to make the stroke always be drawn from between two pixels.

[hungerburg]

Curiously, the stroke in my case is an even number, so it should happily centre itself; but your suggestion rocks, https://myzel.net/js/p5-canvas-half.html :)

-let posx = pen;
-let posy = pen;
+let posx = pen + 0.5;
+let posy = pen + 0.5;

Looks like the strokes are cased with a single pixel alias, and white casing is too weak to erase black casing.

[limzykenneth]

Even or odd number stroke weight probably doesn't matter here as it is still drawing half pixels because the stroke is drawn from the middle of a single pixel.

Glad that it helped, I'm going to close this for now. Thanks.

[hungerburg]

After using the +0.5 workaround in my original sketch, it did not work. The sketch requires, that a white stroke exactly cancels a black stroke in the same position. I found another way to get a true "noSmooth()". This does not need to add 0.5 to the position of the strokes:

If the dimension of the canvas is an odd number, make the width of the stroke an odd number too, otherwise, make it an even number. pen += dim%2 ? pen%2 ? 0 : 1 : pen%2;

My canvas is a square, no idea, how that behaves on non-square sketches.