Почему lineTo() меняет внутренние пиксели?

Эта ситуация трудно объяснить, поэтому позвольте мне проиллюстрировать картину:

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

Здесь код используется для рисования квадратов:

sctx.save();
sctx.strokeStyle = this.color;
sctx.lineWidth = this.width;
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

И строки:

sctx.save();
sctx.strokeStyle = 'orange';
sctx.lineWidth = 5;
console.log(sctx);
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

И картина с той же ситуацией, когда квадраты рисуются с шириной 2px:

Может ли lineTo() испортить альфа-значения? Любая помощь приветствуется.

РЕДАКТИРОВАТЬ: Прояснить, то же самое происходит, когда sctx.closePath(); не указывается из рисованного пути.

Ответ 1

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

Как обходной путь, не используйте lineTo(), используйте несколько наборов одиночных строк.

Ответ 2

Скажем, у вас есть: http://jsfiddle.net/g3Kvw/ Как вы можете видеть, он имеет ширину 2 пикселя. Но если вы измените это, чтобы использовать fillRect() вместо lineTo(), вы http://jsfiddle.net/g3Kvw/1/, который выглядит хорошо.

Проблема: вы не сможете нарисовать что-то, что не является прямоугольником с помощью этого метода.

Но если вы суммируете 0.5 до КАЖДОЙ int-координаты (x, y): http://jsfiddle.net/g3Kvw/3/, вы получите регулярную строку.

Я думаю, что это какая-то ошибка вычисления сглаживания на FF и webkit... Но я не нашел его в трекере ошибок, и это "странное" решение для преобразования числа в float, чтобы получить сплошная линия довольно запутанна. Поскольку использование целых чисел должно быть достаточно.