[SOLVED] Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray

Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray

I tried my best to render just 1 pixel form a 3D Array in a HTML5 Canvas unsuccessfully.

(I know this has been done before but not with a 3D Array). But converting a 3D array to an Uint8ClampedArray and pushing to an Uint8ClampedArray isn't easy.

HTML5 also doesn't have another way to display a pixel manipulatable image.

Is it correct that putImageData() is for rendering vertical strings of pixels?

Here is my code, the problem is marked with: "WHAT DO I GOTTA DO HERE":

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>
      Index.html
    </title>
  </head>
  <body style="margin: 0px; padding: 0px;">
    <canvas id="canvas">
    </canvas>
    <script>
      let a = new Array();
      a.push([]);
      a[x.length - 1].push([]);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(255);
      document.getElementById("canvas").getContext("2d").putImageData(new 
      ImageData(new Uint8ClampedArray("WHAT DO I GOTTA DO HERE"), 1, 1), 1, 
      1);
    </script>
  </body>    
</html>

To test it you can use:

console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);

Solution

You've created a normal Javascript array - you just need to convert it to a clamped array. Off the top of my head, something like:

document.getElementById("canvas").getContext("2d").putImageData(new 
  ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);

(or write your data into a new Uint8ClampedArray instead)