-
Известно, что
<canvas>2d context считает центром самого первого пикселя координату(0.5, 0.5), потому что координаты он считает не как индексы пикселей, а как координаты, мать её, сетки, между которыми пиксели стоят. Координата(0, 0)обозначает не самый верхний левый пиксель, а верхнюю-левую вершину этого пикселя. Поэтому если ты пустил линию(0, 0, 10, 0), то получишь что-то размытое антиалиасингом серое между двумя рядами пикселями. Причём, верхнюю половину размытой линии ты не увидишь, у ибо она будет тянуться до -0.5, а экран у тебя от 0. Некоторые делаютcontext.translate(0.5, 0.5)и так живут, а некоторые + 0.5 везде пишут. Дурка, короче, но не суть. -
Но есть ещё
OffscreenCanvas, чтобы в памяти рисовать спрайты (например), быстро рисуемые на другом канвасе.
Теперь зацените прикол:
-
Выключаем на главном наэкранном канвасе всякий там
context.stanslate(0.5, 0.5)и рисуем линию по целочисленным координатам. Ожидаемо видим размытую хрень. Ладно, понятно. -
Теперь, берём и то же самое рисуем на
OffscreenCanvas, ожидая что в памяти в пиксельный буфер будут отрендерены такие же размытые линии. Далее методомcontext.drawImage(my_offscreen_canvas)пихаем нарисованное на нашемOffscreenCanvasглавный канвас. И хоба, никакого размытия мы не видим, все линии чоткие пацанские.
Как так-то?
