Непрозрачность Canvas `strokeStyle` в Chrome выглядит темнее, чем в Firefox / Edge

#javascript #canvas #opacity #alpha #particles

#javascript #холст #непрозрачность #альфа #частицы

Вопрос:

Это странно.

Настройка strokeStyle на холсте со значением RGBA приводит к тому, что нарисованные линии выглядят немного более непрозрачными в Chrome, чем в Firefox и Edge.

В Chrome непрозрачность строк примерно на 0,1 выше, чем непрозрачность, используемая Firefox и Edge.

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

Chrome

введите описание изображения здесь

Firefox (Edge выглядит идентично)

введите описание изображения здесь

В обоих браузерах выполняется идентичный код с одинаковыми настройками анимации; strokeStyle альфа 0.2 ; холст, заполненный сплошным белым цветом при каждом вызове рисования.

Что заставляет Chrome отображать штрихи с немного более высокой видимой непрозрачностью, чем Firefox / Edge?

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

Это не очень серьезная проблема, но, как я думаю, на скриншотах видно, что она заметна, и я не понимаю, почему это происходит.

Комментарии:

1. Есть ли у холста background-color ? Какой чистый цвет?

2. @IvanRubinson чистый цвет rgba(255,255,255,1) , нет background-color . Я только что заменил fillRect(...) на clearRect(0,0,width,height) (полностью удалил заливку, поскольку она на самом деле не нужна), но эффект от этого не изменился.