[SOLVED] Weird design forming in JS Canvas

Question

Here is a code which draws a spiral in the JS canvas. The slider determines the length of each quadrilateral which is in the spiral.

But, when the slider is set to its minimum value(i.e., the elements are very closely packed), strange grid like pattens form. I guess this is because of the distance (maybe 1px) between 2 quads.

Any idea how to fix it ?
https://code.sololearn.com/Wcf3jnf0eqlJ/?ref=app

Answer 1

[edit: fixed] I still have a rather clear moiré pattern, which is coming from the (unstroked) black borders of each of your filled elements.

I realize you may want the black borders, but you can make the pattern nearly invisible (leaves just a ghost) by setting your borders to the same color as your fill and then adding a stroke() at fill():

// note: strokeStyle at this line doesn't appear to be used without adding stroke()
ctx.fillStyle=`hsl(${i/2+128},100%,50%)`; // Xor operator...
ctx.strokeStyle=ctx.fillStyle; // <-- add this to blend borders into fill
...
ctx.fill(); // your code
ctx.stroke(); // <-- add to draw borders not-in-black

Answer 2

Solved it.
Though not the best way, drawing thrice removes it. (Found on StackOverFlow)

Answer 3

What you are seeing is called a moire pattern and is due to aliasing
https://en.m.wikipedia.org/wiki/Aliasing

Answer 4

nice

Answer 5

well it may not have been your intention to have moire pattern in the spiral.. but i like it a lot.
In fact, if you haven't posted about this "weird design" here, i might have asked you how did u made the awesome pattern....lol..cause before seeing Louis answer i never knew what was moire pattern.

Answer 6

You can upscale the pixel resolution(pixel density) to remove this effect.
https://code.sololearn.com/WKO0CNJ6ny3L/?ref=app

Answer 7

👍👍👍

Answer 8

👍👍👍

Answer 9

The only option left for you is to upscale the px resolution as said by Haris
https://code.sololearn.com/Wq4zXGoFoUJP/?ref=app

keep up the good work!!

Answer 10

Really Good^_^

Answer 11

Java script