Problem with gradient through canvas?

Question

JavaScript

I decided to reinvent the wheel and make my own color picker (just for the sake of practice). I draw a window with flowers with canvas. For the entire width and height, a gradient of primary colors (from red to red) + two additional. gradient (1 bottom for black light, 1 top for white).
The problem is that I can't find pure black or white on what I've drawn. I'm using the color picker built into firefox and the darkest color I can find on the generated color box is #00000f, #010000, #010100 etc, not #000000.

The same problem with white color, the lightest thing that can be taken with an eyedropper is #fffffe, #efffff, etc.
The code here
Canvas just started to study yesterday. I would be grateful for any hint or help!

Answer 1

I suspect that the reason is in the well-known canvas singularity of coordinates - in a number of situations, in order to get an accurate result, you need to specify not integer coordinates (pixel boundaries), but add / subtract 0.5px (to get the pixel centers).
In this case, the prime suspect is the createLinearGradient method.

Answer 2

To understand, so on examples https://codepen.io/search/pens?q=color%20picker&or...
And not what a ready-made solution will give