LINUX.ORG.RU
Форум — Development  

html canvas, линии, координаты, пиксельные буферы, OffscreenCanvas и прочее безумие.

 ,


0

3

  1. Известно, что <canvas> 2d context считает центром самого первого пикселя координату (0.5, 0.5), потому что координаты он считает не как индексы пикселей, а как координаты, мать её, сетки, между которыми пиксели стоят. Координата (0, 0) обозначает не самый верхний левый пиксель, а верхнюю-левую вершину этого пикселя. Поэтому если ты пустил линию (0, 0, 10, 0), то получишь что-то размытое антиалиасингом серое между двумя рядами пикселями. Причём, верхнюю половину размытой линии ты не увидишь, у ибо она будет тянуться до -0.5, а экран у тебя от 0. Некоторые делают context.translate(0.5, 0.5) и так живут, а некоторые + 0.5 везде пишут. Дурка, короче, но не суть.

  2. Но есть ещё OffscreenCanvas, чтобы в памяти рисовать спрайты (например), быстро рисуемые на другом канвасе.

Теперь зацените прикол:

  1. Выключаем на главном наэкранном канвасе всякий там context.stanslate(0.5, 0.5) и рисуем линию по целочисленным координатам. Ожидаемо видим размытую хрень. Ладно, понятно.

  2. Теперь, берём и то же самое рисуем на OffscreenCanvas, ожидая что в памяти в пиксельный буфер будут отрендерены такие же размытые линии. Далее методом context.drawImage(my_offscreen_canvas) пихаем нарисованное на нашем OffscreenCanvas главный канвас. И хоба, никакого размытия мы не видим, все линии чоткие пацанские.

Как так-то?



Последнее исправление: lesopilorama (всего исправлений: 2)
← Его крокейшество о вредности СУБД, если архитектурно она для программ, а не живого человека
Как сделать free pascal на VS Code? →

скажу даже точнее: железо считает также. это вроде как можно переключить в угол (0,0). 2Д работает через 3Д.

Так что жри что дают и не жужжи. Ничего другого нет и не будет.

«И хоба»

Хоба, и контекст в onscreen канвасе это часть контекста отрисовки всего окна. А offscreen канвас это твоя личная помоечка на которую всем наплевать. Ты можешь видеть последствия работы логики браузера а не opengl.

Чтоб видеть свои последствия используй силу:

https://registry.khronos.org/OpenGL-Refpages/gl4/html/gl_FragCoord.xhtml

ckotctvo
()
Ответ на: комментарий от ckotctvo

Хоба, и контекст в onscreen канвасе это часть контекста отрисовки всего окна. А offscreen канвас это твоя личная помоечка на которую всем наплевать.

А правила рендеринга вызовов lineTo и прочих подобных-то у них почему разные? Почему линия между пикселей у первого - это пыхтит антиалиасинг, а линия между пикселей у второго - он срал на эту логику и ведёт линию тупо по одному ряду пикселей?

lesopilorama
() автор топика

иди читай про Display context, PostScript Display model (затем: PDF как подмножество постскрипт; Display PostScript как расширение постскрипта печатного)и gsave/grestore в постскрипт.

и соответственно, потом это перешло в GDI и канвас в браузере.

anonymous
()
Ответ на: комментарий от anonymous

ты пилишь фидобраузер с векторным гипертекстовым? или что?

Вывел на канвас фотку, получившуюся врезультате её ресайза в сишном коде скомпиленном в webasm, теперь надо поверх фотки вывести рамку инструмента «ресайз», чтобы юзер мог её порезать. Таки задачу решил уже, +0.5 оказалось меньшим из зол

lesopilorama
() автор топика
Последнее исправление: lesopilorama (всего исправлений: 1)
Ответ на: комментарий от anonymous

иди читай про Display context, PostScript Display model (затем: PDF как подмножество постскрипт; Display PostScript как расширение постскрипта печатного)и gsave/grestore в постскрипт

Чтобы что. Тащи сразу кратенько ответ сюда оттуда, если он там есть. Ты увибел там ответ и сюда не скопипастил его? Зачем ты тогдп туда ходил. Капец.

lesopilorama
() автор топика

Проверил, поведение не подтверждаю.

<!doctype html>
<canvas id="canvas1" width="100" height="100"></canvas>
<br>
<canvas id="canvas2" width="100" height="100"></canvas>
<script>
const canvas1 = document.getElementById('canvas1');
const context1 = canvas1.getContext('2d');
context1.strokeRect(10, 10, 10, 10);
context1.strokeRect(10.5, 30.5, 10, 30);
	
const canvas2 = document.getElementById('canvas2');
const offscreenCanvas = canvas2.transferControlToOffscreen();
const context2 = offscreenCanvas.getContext("2d");
context2.strokeRect(10, 10, 10, 10);
context2.strokeRect(10.5, 30.5, 10, 30);
</script>

Этот код рисует две канвы с идентичными квадратами. Первый расплылся, второй - нет.

vbr ★★★★★
()
Ответ на: комментарий от s-warus

Да не то, чтобы отход. Математики наоборот скажут, что к истокам пришли. А в целом, хочешь контроля над пикселями - пиши свои функции рисования линий на сишечке, компили в WebAssembly и воруй гусей на буфере в памяти, а потом кидай на <canvas> - кстати zero-copy.

lesopilorama
() автор топика
Ответ на: комментарий от s-warus

можно поинтересоватся (вместо гугла использую): WebAssembly может получать события мышки и клавы или прослойку js надо использовать?

Не может, WASM вообще не в курсе что работает в браузере, не в курсе про клавы, мыши и экраны и окна и html. Это тупой сишный бинарь, так сказать. Хочешь ему о чём-то сообщить - пишешь сишную функцию торчащую из него, назовем её void call_mouse_move(uint16_t x, uint16_t y), и дёргаешь её. В твоём вопросе понадобится написать на JS обработчик события mousemove, а в нём дёрнуть WASM за нужный рычаг, то ечть вызвать свою сишную функцию вида wasm.call_mouse_move(x, y)

lesopilorama
() автор топика
Последнее исправление: lesopilorama (всего исправлений: 1)
Ответ на: комментарий от rtxtxtrx

wasm ничего не умеет из этого. он не про интерактив, а про… да неизвестно для чего он нужен. только наркоманы, сидящие на расте, его используют

Никто не понял из чего ИЗ ЭТОГО.

lesopilorama
() автор топика
Ответ на: комментарий от vbr

Почему подтвердил? Я подтвердил то, что Canvas и OffscreenCanvas работают идентично.

У тебя немного не так OffscreenCanvas создан. Ты через transferControlToOffscreen() запилил, а надо new OffscreenCanvas объект создать.

lesopilorama
() автор топика

потому что координаты он считает не как индексы пикселей, а как координаты, мать её, сетки, между которыми пиксели стоят.

Не совсем так. Если нарисовать прямоугольник с заливкой через fillRect по целым координатам, то он попадет ровно в пиксельную сетку, fillRect( 10, 10, 10, 10 ) нарисует четкий квадратик без размытия.

Линии получаются размытыми потому что координаты начальной и конечной точек линии находятся по центру ее ширины. Т.е. линия шириной в один пиксель от точки 10, 10 до точки 20, 10 будет аналогична прямоугольнику fillRect( 10, 9.5, 20, 0.5 ). Все векторные движки так работают. Это следует из геометрии, и ничего с этим поделать нельзя.

Когда флеш был живой (который macromedia и adobe), там была опция привязки линий к пиксельной сетке, так что и линии и заливки всегда получались четкими. К сожалению, в браузерах такой возможности нет.

astn
()

Известно, что 2d context считает центром самого первого пикселя координату (0.5, 0.5), потому что координаты он считает не как индексы пикселей, а как координаты, мать её, сетки, между которыми пиксели стоят. Координата (0, 0) обозначает не самый верхний левый пиксель, а верхнюю-левую вершину этого пикселя.

Рубрика «познаём мир».

Вообще-то так работают все графические библиотеки 2D рисования с поддержкой antialiasing и субпиксельных координат. И это логично если немного подумать.

Некоторые делают context.translate(0.5, 0.5) и так живут,

Тогда рисование фигур с заливкой будет размытое.

X512 ★★★★★
()
Ответ на: комментарий от lesopilorama

Топег вообще не про это, а про разницу между двумя режимами.

Вероятно, проблема в том, что в одном варианте стоит translate, и картинка, нарисованная офскрин идентично обычной, рисуется со смещением в полпикселя.

Вероятность ошибки в браузере довольно мала, канвасу и html5 уже очень много лет.

astn
()
Ответ на: комментарий от astn

Конечно не про ошибку речь в браузере, кто мы такие чтобы баги в браузерах и компиляторах находить, я быдло для такого. Но просто любопытна была разница в поведениях.

lesopilorama
() автор топика
← Его крокейшество о вредности СУБД, если архитектурно она для программ, а не живого человека
Development
Как сделать free pascal на VS Code? →