Как создать полностью прозрачный прямоугольник на холсте HTML, который фактически отображается? ⇐ Javascript

[Anonymous]

Я пытаюсь нарисовать прямо на холсте с частичной и полной прозрачностью.
Все работает нормально, пока мы не дойдем до точки, где значение альфа составляет 0.
, тогда внезапно прямоугольник вообще не отображается. />
const canvas1 = document.querySelector("#one");
const ctx1 = canvas1.getContext('2d');

//red (half visible)
ctx1.fillStyle = `rgba(255, 0, 0, 0.5)`;
ctx1.fillRect(0, 0, 50, 100);

//green (barely visible)
ctx1.fillStyle = `rgba(0, 255, 0, 0.1)`;
ctx1.fillRect(60, 0, 50, 100);

//blue (invisible)
ctx1.fillStyle = `rgba(0, 0, 255, 0)`;
ctx1.fillRect(120, 0, 50, 100);< /code>
#one {
background-color: black;
width: 300px;
height: 200px;
}< /code>
< /code>
< /div>
< /div>
< /p>
Код создает 3 прямоугольника (один красный, один зеленый, один синий).
, в то время как это, кажется, работает нормально в браузере, когда я копируется, синий) не будет отображаться вообще. Переключить альфа -канал, затем появляются только первые две прямоугольники:
Изображение в Gimp с переключенным альфа -каналом
Чего я пытаюсь достичь, является полностью прозрачным прямоугольником, который на самом деле есть, но невидимо.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ually-rend