Почему частицы на canvas сходят с ума от прозрачного фона?

Question

[Vlados Landos]

Всем привет, хочу сделать прозрачный фон в канвасе, что бы вставить его к себе на сайт.
https://codepen.io/borian/pen/oKwGA - виновник
Как только меняю context.fillStyle = "#00000" на context.fillStyle = "rgba(0,0,0,0)", частицы превращаются в линии. Почему? Как мне это исправить? Или подскажите какое-нибудь другое решение/скрипт/движок. Цель - прозрачный фон у канвас с сферой из частичек. Кстати, точно такую же проблему заметил и на других кодпенах с частицами.

Comments

[Сергей Сергей]

потому что прозрачная заливка ничего не затирает.

[Vlados Landos]

Сергей Сергей, Как исправить?

[profesor08]

Производительность оставляет желать лучшего. Подобные штуки лучше рисовать на GPU, а не на CPU. Тем самым пожалев посетителей.

[Vlados Landos]

profesor08, Расскажи подробнее, если не затруднит. Можно ли переделать рендер на gpu в этом скрипте? Если да, сложно ли это? И самое главное как? В js нубас, занимаюсь маркетингом.

Answer 1

[ProjectSoft]

//background fill
context.clearRect(0,0,displayWidth,displayHeight);
context.fillStyle = "rgba(0,0,0,0)";
context.fillRect(0,0,displayWidth,displayHeight);

И будет счастье

Comments

[Vlados Landos]

Oh yes, оргазм. Спасибо тебе большое, добрый человек. Дай бог тебе здоровья.