погрешность цвета canvas

[BratKilla]

Создана прямая в canvas с цветом rgb(15,100,100). Необходимо вычислить первую составляющую rgb, т.е. -15 .
Вычислил, но canvas размазывает это значение с 12 до 22 в зависимости от определённого пикселя на прямой.

Необходимо сократить общую погрешность одного цвета до 5 (т.е. если значение 3, то погрешность 0-5, если значение 17, то погрешность 15-20), чтобы из 255 можно было бы извлечь 50 значений. Если погрешность уберётся вообще то это идеал (т.е. 15 так и останется 15).

Есть ли такая возможность? И не опасно ли определять объекты, нарисованные в canvas по цвету в разных браузерах? насколько знаю rgb везде приветствуется... Могу, конечно, помимо R, использовать и G и B, этой совокупности хватит под задачу, но с одним R будет проще, да и знать хочу не могу)

[Aetae]

Очевидно что дело в сглаживании. Рисуйте прямую потолще и в центре пиксели будут именно нужного цвета. Либо отключите сглаживание canvas.

[BratKilla]

Aetae,
Да именно в сглаживании. Я хочу знать как уменьшить сглаживание или полностью его отключить. Пересмотрел все свойства и методы canvas но, ни прямого, ни косвенного способа повлиять на сглаживание не нашёл. Так же в поисковиках ответа не нашёл. Заливал одну толстую линию несколько раз сверху, но на границе всё равно погрешность до 7 шагов доходит. Суть в том что если пользователь нажмёт не в центр, а на край линии, то он получит не то значение что требуется. При использовании тач дисплеев промахнуться проще простого! У меня сложилось такое впечатление, что до полного раскрытия потенциала canvas, ещё не один год пройдёт. Слишком мало свойств и методов, для простоты работы.

[Aetae]

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

Но не факт что по может.
Ультимативное решение рисовать вручную прямыми линиями по координатам вида (х+0.5,y+0.5).)

[BratKilla]

Aetae,
в теории image-rendering идеальный вариант, но на практике не повлёк никаких изменений, я так понимаю такой способ новаторский для многих браузеров. Пошёл обходным путём, как писал ранее, задействовав второй элемент RGB, т.е. G. Тем самым возвёл в квадрат количество вариантов, будет мало возведу в куб) . Буду ждать полной совместимости с браузерами image-rendering

[kostyanet]

Нет у канваса никакого сглаживания вообще.

Не путайте с интерполяцией которой можно управлять единственно через ctx.imageSmoothingEnabled

Если вы заметили сглаживание нарисованной линии то проверьте shadow в своих кодах либо в кодах либы которая услужливо сглаживает.

И последний, неколебимый вариант - браузер гадит. Тут либо искать браузерный контекст, либо забить.

Забить так: в пиксельных операциях всегда применяется порог - threshold - с помощью которого и определяется что красное, что черное, что белое и так далее.

но canvas размазывает это значение с 12 до 22

Не заливайте канвас цветом. Пресловутое сглаживание формируется в альфе, которая затем умножается на цвет пикселов фона, а если фона нет, умножаться не на что.

[BratKilla]

kostyanet,
если я в canvas рисую линию любой толщиной, то по краям, ближайшие к фону пиксели имеют не тот цвет, что я задавал в свойстве. Как сделать монотонной линию на всей занятой ею поверхности?

imageSmoothingEnabled = false;
mozImageSmoothingEnabled = false;
oImageSmoothingEnabled = false;
webkitImageSmoothingEnabled = false;

Не помогли. Вообще ни каких результатов. В canvas только линии (не пересекаются), нет фона (не заливал), нет shadow, и вообще всего по минимуму. Если знаете просто напишите как решить данную проблему, пожалуйста!

[kostyanet]

Я же написал что метод интерполяции и сглаживание не одно и то же.

Еще раз

http://stackoverflow.com/questions/4...-anti-aliasing

Я даже не пытался найти и процитировать из документации, потому что там голимый баян. Все зависит от браузера.

Рисуйте сами, через дату. Однако надо понимать что вы там делаете, а что вы там делаете непонятно.

Суть в том что если пользователь нажмёт не в центр, а на край линии

Пользователь "нажимает" на линию и вы хотите узнать на какую? Приготовьтесь к введению порога. Вместо 16 млн цветов разрешите себе 256, или 512 - сколько вас устроит - и ориентируйтесь не на равенство, а на диапазон. Диапазон тем самым порогом и задается.

И еще вот какая штука - размер сэмпла. Сколько он у вас применительно к тачу пальцем? Ни за что не поверю что 1Х1 как у мыши. Даже со стилусом 1Х1 не имеет смысла.

И последнее. Вертикальные и горизонтальные линии надеюсь без сглаживания получаются?

Потому что если и они расплываются, значит у вас позиционирование не попадает в пиксельную сетку.

[kostyanet]

Из примера выше.

context.moveTo(0,0); 
context.lineTo(100,75);
context.strokeStyle = "#df4b26";
context.lineWidth = 3;

Если эквидистанта располагается по центру заданного пути, то ежу ж понятно слева от него 1.5 пиксела, справа от него 1.5 пиксела. Смотрите на иллюстрации. Это в ФШ сделано, но принцип фундаментален.

Без сглаживания обводка в 3 пиксела невозможна. Если вы ничтоже сумняще так же поступаете как автор цитаты, то попробуйте для начала задать толщину линии кратную 2. Чтобы и слева и справа было одинаково. Или ищите опции расположения эквидистанты - снаружи, или внутри.

Синим на картинке показана та же обводка, но в 4 пиксела.

Вертикальные и горизонтальные линии пикселы которых уложены в сетку никогда не сглаживаются. У вас так?

[kostyanet]

Насчет многократной отрисовки. Все должно сработать если работает как положено. Это значит линия должна быть нарисована на фоне и повтор отрисовки приведет к повторному умножению значений пикселов фона на пикселы альфы, которые уже были умножены прежде.

Если многократная обводка по одному пути ничего не меняет, значит альфа существует отдельно, а цвет рисунка - отдельно. И там никаких изменений быть не должно, за исключением что ширина лини может оказаться больше чем задано.