Проблемка с градиентом через сanvas?

Question

[Максим]

Решил изобрести велосипед и сделать свой колор пикер (просто ради практики). Окошко с цветами рисую канвасом. На всю ширину и высоту градиент основных цветов (от красного к красному) + два доп. градиента (1 снизу для черного света, 1 сверху для белого цвета).
Проблема в том, что я не могу найти чистый черный или белый цвета, на том, что нарисовал. Я использую колор пикер, всторенный в firefox, и самый темный цвет, который получется найти на созданном окошке с цветами это #00000f, #010000, #010100 и т.д., но не #000000.

Та же проблема и с белым цветом, самое светлое, что получается взять пипеткой это #fffffe, #efffff и т.д.
Код тут
Канвас только вчера начал изучать. Буду благодарен за подсказку или помощь!

Answer 1

[dom1n1k]

Подозреваю, что причина в известной канвасовской особенности координат - в ряде ситуаций, чтобы получить точный результат, нужно указывать не целочисленные координаты (границы пикселей), а добавлять/вычитать 0.5px (чтобы попасть центры пикселей).
В данном случае главный подозреваемый - метод createLinearGradient.

Comments

[Максим]

Спасибо большое, в этом и оказалась причина!

Answer 2

[twobomb]

Как вариант рисовать не с 0, а 1го пикселя. Тоже когда-то делал колор пикер на канвас, но чуть другой. На вашем нет серого цвета.

Answer 3

[Олег]

Разбираться, так на примерах https://codepen.io/search/pens?q=color%20picker&or...
А не то, что дадут готовое решени

Comments

[Максим]

Готовое решение не дадут? А я так надеялся:( Спасибо за ссылку, сам бы я гуглить не додумался:)

[Олег]

Максим, codopen - это не гугл.
codopen - опыт приходящий с годами.

[Максим]

Олег, я это понимаю. Я к тому, что готовых решений я не ждал, не просил переписать мой код, исправить ошибки, не спросил что-то обобщенное ("как сделать колор пикер?"). Я спросил о конкретной проблеме/загвоздке. А советовать "разбираться на примерах", кидать ссылки на гугл/кодпен - это слегка не в ту калитку. Я и без того гуглил/пытлася разобраться на примерах и т.д.