Как избавиться от полос на canvas при использовании scale() ?

Question

[lgick]

В хроме (и не только), если увеличивать кадр на canvas с помощью scale() появляются полосы
Полосы образуются в местах стыковки тайлов

jsbin.com/nixezuda/6/watch?js,output

Как их удалить?

Answer 1

[Иван Старков]

Рисуйте тайлы на пиксель справа-вниз больше, чтобы они перекрывались,
рисуйте как рисовали со старым размером используя дельту +1/s
как тут jsfiddle.net/W9LpB

Comments

[lgick]

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

[Иван Старков]

Вам надо поменять сами тайлы! Тайл будет размером не 32x32 пикселя а 33 на 33 пикселя где колонка-полоска пикселей справа-снизу повторяют-дублируют стыковочные начальные полоски других тайлов, если вы оставляете свои тайлы как есть то ничего и не выйдет.

[lgick]

а ну все понял, да так будет работать! Спасибо!

А почему нужно создавать такие нестандартные тайлы? Ведь везде тайлы обычной формы (32х32 или 16х16) без дополнительных пикселей и вроде все работает.

[Иван Старков]

Это просто самое простое решение, реальное решение - быть pixel perfect а именно учитывать dpi экрана пользователя, scale браузера, дальше помнить что отрисовка на canvas сейчас может ускоряться при помощи видеокарты, и там может стоять шейдер который реально рисует на экране не ту точку что вы указали а некую среднюю соседних (а на краях средняя будет плыть), опять же ретина дисплеи приподнесут сюрприз.
Я под андройд когда пишу (есть в моей инфе ссылка) вот там я как раз стараюсь быть pixel perfect, но у меня полный доступ к hardware информации, шейдеры мои и тп, под браузером же проще "обмануть систему" :-)

[lgick]

cпасибо за помощь!