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

html5 canvas image data
canvas drawimage performance
canvas putimagedata not working
html canvas read pixel
image data api
getimagedata returns 0
canvas render
canvas performance

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]);

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)

Recently Active 'putimagedata' Questions, Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray · javascript html5-canvas array-push putimagedata  Each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array. The Uint8ClampedArray contains height × width × 4 bytes of data, with index values ranging from 0 to (height×width×4)-1.

Draw 200 x 200 red block into canvas. Requires <canvas></canvas>

I would advise against using a 3D array as it seems unnecessarily complicated

const width = 200;
const height = 200;

const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const destData = new ImageData(width, height);
const dData = destData.data;

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const o = 4 * (y * width + x);
    dData[o] = 255; // R
    dData[o + 1] = 0; // G
    dData[o + 2] = 0; // B
    dData[o + 3] = 255; // A
  }
}

context.putImageData(destData, 0, 0);

Pixel manipulation with canvas, The Uint8ClampedArray contains height × width × 4 bytes of data, with index getImageData(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + You can use the putImageData() method to paint pixel data into a context: we put the modified pixel array back to the canvas using putImageData(). 1 Which Windows SDK is the latest compatible with Visual Studio 97 and Windows 9x Apr 13 '19 0 Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray Jan 31 '19

I have the solution and it works, I wanted to post to contribute to the community of Stack Overflow, so the next one with this question could easily do it there selves.

Just Like above it's a simplified version though:

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>
      Google Chrome, I suppose
    </title>
  </head>
  <body style="background-color: black; margin: 0px; margin-bottom: 0px; padding: 0px;">
    <canvas style="image-rendering: pixelated" id="canvas">
    </canvas>
    <script>
      var t =
      [
        240,
        128
      ];
      document.getElementById('canvas').width = t[0];
      document.getElementById('canvas').height = t[1];
      var a = new Array()
      {
        a.push([]);
        a[a.length - 1].push([]);
        a[a.length - 1][a[a.length - 1].length - 1].push(127, 127, 127, 255);
      }
      var i = 0;
      document.getElementById('canvas').getContext('2d').putImageData(new ImageData(Uint8ClampedArray.from
      (
        [].concat.apply
        ([],
          a[i]
        )
      ), 1), i, 0);
      i = i + 1;
      i = 0;
    </script>
  </body>
</html>

as you can see, I've replaced variable x with a.

I hope this can help others also and thank you all for your suggestion!

Javascript image pixel manipulation, The canvas element is part of HTML5, and allows you to render graphics and be useful for other kinds of multidimensional array processing than image processing. 1. 14 Aug 2019 to load an existing image to canvas with JavaScript​, which html5-canvas Pixel Manipulation with "getImageData" and "​putImageData"  I’ll first explain how to render a basic shape from a 3D scene using the JavaScript Canvas 2D API. Then in the second part of this post, I’ll show you how to make everything a bit fancier with some textures and 3D volumes. 1. Setup the canvas scene. To get started, we need to add a canvas element in our HTML.

HTML5 Canvas/Pixel manipulation & Animations, The ImageData interface represents the pixel data on the <canvas> element. Get the Uint8ClampedArray containing the data in the RGBA order, with integer getImageData(0, 0, canvas.width, canvas.height);; // One-dimensional array putImageData(imageData, 0, 0);; }; // Access the rendering context; var ctx = canvas. The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.

Webgl getimagedata, For example, the 3d canvas context powered by webgl is currently 11 Jan 2016 1 shows that with a modern graphics card, WebGL allows us to render very Get Color of a Pixel using HTML5 Canvas's getImageData Method - Duration: 18:02. getImageData() method of the Canvas 2D API returns an ImageData object  The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

HTML canvas createImageData() Method, Create a 100*100 pixels ImageData object where every pixel is red, and put it The array containing the color/alpha information is stored in the data property of copy the image data back onto the canvas with the putImageData() method. 1. This creates a new ImageData object with the specified dimensions (in pixels):​  In order to make that work we have to convert the coordinates to integers, so we do that. Then we get the pixel data from our imageData using its data property, which is a Uint8ClampedArray instance, or an array of width times height times 4 unsigned 8-bit integers with values between 0 and 255 inclusive. We’ll be using this to write directly

Comments
  • Thank you for your answer! I will check it out immediately! Oh no, it gives this error again: Uncaught DOMException: Failed to construct 'ImageData': The input data length is not equal to (4 * width * height) -, I'll try to take a look at it.
  • Thank you very much! You really helped me out! It seems to work when I do it like this: ImageData(Uint8ClampedArray.from( [ x[0][0][0], x[0][0][1], x[0][0][2], x[0][0][3], ] ), 1, 1), 1, 1); This is because I made a sepperate dimension for the RGBA values.
  • I already have done the initializing with a while(x.length < canvas.width){x.push([])while(x[x.length] < canvas.height){x[x.length].push([])}}. I will also edit the variable names to something more logic.
  • Thank you for your advise but adapting to do every variable times 4 only in width is just not easy to handle for my human brain. Imagine a monitor that's 800 pixel wide but only 200 pixels high. Imagine if monitors had not only rgb but also yellow, cyan and violet.
  • Oh now I get it, you can just put the array variables in new ImageData().data[], thank you, you've been really helpful to me!
  • So am I getting it right that putImageData is for rendering a vertical string of pixels (and eventually multiple)?
  • putImageData draws what you've done onto the canvas at the end