Почему моя функция шума холста всегда отображается только красным цветом?

Я пытаюсь применить эффект шума к моему холсту на основе кодовая ручка, который я видел, который, в свою очередь, очень похож на ТАК ответ.

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

Я значительно переработал код codepen, потому что (на данный момент) меня не волнует анимация шума:

/**
 * apply a "noise filter" to a rectangular region of the canvas
 * @param {Canvas2DContext} ctx - the context to draw on
 * @param {Number} x - the x-coordinate of the top-left corner of the region to noisify
 * @param {Number} y - the y-coordinate of the top-left corner of the region to noisify
 * @param {Number} width - how wide, in canvas units, the noisy region should be
 * @param {Number} height - how tall, in canvas units, the noisy region should be
 * @effect draws directly to the canvas
 */
function drawNoise( ctx, x, y, width, height ) {
    let imageData = ctx.createImageData(width, height)
    let buffer32 = new Uint32Array(imageData.data.buffer)

    for (let i = 0, len = buffer32.length; i < len; i++) {
        buffer32[i] = Math.random() < 0.5
            ? 0x00000088 // "noise" pixel
            : 0x00000000 // non-noise pixel
    }

    ctx.putImageData(imageData, x, y)
}

Из того, что я могу сказать, суть того, что происходит, заключается в том, что мы оборачиваем представление необработанных данных ImageData (серия 8-битных элементов, которые последовательно отражают значения красного, зеленого, синего и альфа-канала для каждого пикселя) в 32-битный массив, что позволяет нам работать с каждым пикселем как с единым кортежем. Мы получаем массив с одним элементом на пиксель вместо четырех элементов на пиксель.

Затем мы перебираем элементы в этом массиве, записывая значения RGBA в каждый элемент (то есть в каждый пиксель) на основе нашей логики шума. Логика шума здесь очень проста: каждый пиксель имеет ~ 50% шанс быть «шумовым» пикселем.

Шумовым пикселям присваивается 32-битное значение 0x00000088, которое (благодаря 32-битному фрагментированию, обеспечиваемому массивом) эквивалентно rgba(0, 0, 0, 0.5), то есть черному цвету, непрозрачность 50%.

Нешумным пикселям присваивается 32-битное значение 0x00000000, которое является черным 0% непрозрачности, т.е. полностью прозрачным.

Интересно, что мы не пишем buffer32 на холсте. Вместо этого мы пишем imageData, который использовался для создания Uint32Array, что наводит меня на мысль, что мы изменяем объект imageData с помощью какой-то передачи по ссылке; Я не совсем понимаю, почему это так. Я знаю, как обычно работает передача значений и ссылок в JS (скаляры передаются по значению, объекты передаются по ссылке), но в мире нетипизированных массивов значение, передаваемое конструктору массива, просто определяет длину массива. Это явно не то, что здесь происходит.

Как уже отмечалось, вместо поля черных пикселей, которые прозрачны на 50 или 100%, я получаю поле со сплошными пикселями, полностью красного цвета. Я не только не ожидаю увидеть красный цвет, но и нет доказательств случайного назначения цвета: пиксель каждый сплошной красный.

Играя с двумя шестнадцатеричными значениями, я обнаружил, что это дает рассеяние красного на черном, которое имеет правильное распределение:

buffer32[i] = Math.random() < 0.5
    ? 0xff0000ff // <-- I'd assume this is solid red
    : 0xff000000 // <-- I'd assume this is invisible red

Но он по-прежнему сплошной красный на сплошном черном. Ни один из базовых данных холста не отображается через пиксели, которые должны быть невидимыми.

Как ни странно, я не могу получить никаких цветов, кроме красного или черного. Я также не могу получить никакой прозрачности, кроме 100% непрозрачности. Просто чтобы проиллюстрировать разрыв, я удалил случайный элемент и попытался записать каждое из этих девяти значений в каждый пиксель, просто чтобы посмотреть, что произойдет:

buffer32[i] = 0xRrGgBbAa
                         // EXPECTED   // ACTUAL
buffer32[i] = 0xff0000ff // red 100%   // red 100%
buffer32[i] = 0x00ff00ff // green 100% // red 100%
buffer32[i] = 0x0000ffff // blue 100%  // red 100%
buffer32[i] = 0xff000088 // red 50%    // blood red; could be red on black at 50%
buffer32[i] = 0x00ff0088 // green 50%  // red 100%
buffer32[i] = 0x0000ff88 // blue 50%   // red 100%
buffer32[i] = 0xff000000 // red 0%     // black 100%
buffer32[i] = 0x00ff0000 // green 0%   // red 100%
buffer32[i] = 0x0000ff00 // blue 0%    // red 100%

В чем дело?

Обновлено: аналогичные (плохие) результаты после отказа от Uint32Array и жуткой мутации на основе Статья MDN о ImageData.data:

/**
 * fails in exactly the same way
 */
function drawNoise( ctx, x, y, width, height ) {
    let imageData = ctx.createImageData(width, height)

    for (let i = 0, len = imageData.data.length; i < len; i += 4) {
        imageData.data[i + 0] = 0
        imageData.data[i + 1] = 0
        imageData.data[i + 2] = 0
        imageData.data[i + 3] = Math.random() < 0.5 ? 255 : 0
    }

    ctx.putImageData(imageData, x, y)
}