ImageData Constructor error on old Chromium

[chiefcll]

Once you hit Chrome 38 and below - there is an error with ColorTexture

This makes it so any colored rectangles don't work.

[chiefcll]

Weirdly ImageData is supposed to be there on Chrome 36
https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData

[elsassph]

Interestingly, L2 doesn't create an ImageData for that - just raw bytes:
https://github.com/rdkcentral/Lightning/blob/dev/src/textures/RectangleTexture.mjs#L30

[wouterlucas]

It might be that older versions like Chrome 36 relied on createImageData on the 2d context instead of new ImageData ? Hence its throwing a constructor error?

Might need to fall back to using canvas.getContext('2d').createImageData() instead of new ImageData() directly?

[elsassph]

No @wouterlucas this happens in ColorTexture, where a single pixel texture is created.

[wouterlucas]

Ah I see - sorry the stack is kinda weird and imageData threw me off, here?
https://github.com/lightning-js/renderer/blob/main/src/core/textures/ColorTexture.ts#L67

I guess this was around the time they where still working on Typed Arrays with the introduction of ES5 and maybe the Uint8ClampedArray is buggy or not fully implemented in v36? Or ImageData might have issues with whatever v36 is returning as a clamped array.

I'd have to follow the L2 code a little more but does changing that to a Uint8Array change anything?
Could always manually clamp it, though that would be horrible in performance 😅 for the test:

function createClampedArray(data) {
  let clampedArray = new Uint8Array(data.length);
  for (let i = 0; i < data.length; i++) {
    clampedArray[i] = Math.max(0, Math.min(255, data[i])); // Manual clamping
  }
  return clampedArray;
}

or just return a white pixel like L2 does and see if the error goes away to pin point it

[wouterlucas]

circling back to this one, MDN is actually technically correct and incorrect that Chrome 36+ does has a ImageData constructor. It's correct that there is indeed a ImageData object but on Chrome 38 you can't instantiate it. Regardless of what parameters you give new ImageData() it always returns illegal constructor 🤣 and I've tried everything.

On top of that you can't create uint arrays with an iterable in the constructor, changed Textures/ColorTexture in #449 to use an Uint8Array directly avoiding ImageData all together.

I'll run some tests today, bit curious if this also shaves off a little on the benchmarks. As I'd imagine creating an ImageData object is a little heavier then allocating a Uin8Array and this is used extensively for textures.