Scaling down & rotating a pattern causes rendering issues and flickering

[miracle2k]

Take this sketch as an example, which I created to reproduce the problem in isolation:

https://editor.p5js.org/elsdoerfer/sketches/NrPcyu-mG

It’s supposed to be a striped line pattern. I want it to be very fine, 1px lines and less, so I am using

let mat = new DOMMatrix();
mat = mat.scale(SCALE_DOWN);
pattern.setTransform(mat);

to scale it down. This works ok in many cases, but really does not work for some angles. It also gives a strange flickering effect when scrolling.

It doesn’t even matter how much I scale down. Using these options in the code equally causes flickering:

const PATTERN_SIZE = 1;
const SCALE_DOWN = 1/2;

const PATTERN_SIZE = 1;
const SCALE_DOWN = 1/8;

or using a bigger pattern:

const PATTERN_SIZE = 5;
const SCALE_DOWN = 1/10;

I understand that drawing a line < 1 pixel may challenging, but some of these seem just wrong entirely.

Is there a way to solve this?

[KumuPaul]

What you’re seeing is the inevitable effect of displaying patterns of lines on a pixel display where the density of the pattern approaches the density of the pixels:

Moiré pattern