0

I have a black html body background and a transparent canvas that I am stroking a single white line onto. Every time I stroke the line in code, the line appears brighter despite using full opacity in the stroke settings.

context.strokeStyle = "rgba(255, 255, 255, 1)"; // Non transparent white.
context.lineWidth = 1; //Single pixel line width
context.setLineDash([]); //No line dash

I can see it getting visibly brighter white with every stroke, up to 4 strokes.

context.stroke();
context.stroke();
context.stroke();
context.stroke();

Why is this happening? Surely the canvas data being drawn to is exactly the same, and the stroke should remain identical no matter how many times I call it?

I tried stroking up to 16 times, but can only visibly tell it getting brighter up to 4, but with a single stroke its easy to see that its not a completely solid white line, If I press my face against the screen I can see the white dots with very slight black between them.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Joe
  • 11
  • 2
  • Does this answer your question? [html 5 canvas LineTo() line color issues](https://stackoverflow.com/questions/49733682/html-5-canvas-lineto-line-color-issues) – Kaiido Nov 19 '22 at 06:07
  • Yes I think it does. Fixing everything with a 0.5px offset. – Joe Dec 08 '22 at 15:54

0 Answers0