ImageData : Object

constructor

Contains the pixel data of a CanvasRenderingContext2D. Can also be created through CanvasRenderingContext2D.createImageData() or CanvasRenderingContext2D.getImageData().

Spec

Constructors

new ImageData(width : Number, height : Number) : ImageData

Creates an ImageData of the specified size filled with transparent black.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var imageData = new ImageData(100, 100);

  for (var i = 0; i < imageData.data.length; i++) {
    imageData.data[i] = Math.round(255 * Math.random());
  }

  context.putImageData(imageData, 0, 0);
</script>

Run

Results:

new ImageData(data : Uint8ClampedArray, width : Number, height : Number) : ImageData

Creates an ImageData of the specified size with the specified data. data[0] is the Red component of the first pixel (top left), data[1] is the Green component of the first pixel, data[2] is the Blue component of the first pixel, data[3] is the Alpha component of the first pixel, data[4] is the Red component of the second pixel (one right of top left), etc.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var width = 100;
  var height = 100;

  var data = new Uint8ClampedArray(4 * width * height);

  for (var i = 0; i < data.length; i++) {
    data[i] = Math.round(255 * Math.random());
  }

  var imageData = new ImageData(data, 100, 100);
  context.putImageData(imageData, 0, 0);
</script>

Run

Results:

Instance Properties

data : Uint8ClampedArray readonly

The pixel color values. The data is stored in RGBA order so data[0] is pixel 0's red channel, data[1] is pixel 0's green channel, data[2] is pixel 0's blue channel, data[3] is pixel 0's alpha channel, data[4] is pixel 1's red channel, etc.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var imageData = context.createImageData(100, 100);

  for (var i = 0; i < imageData.data.length; i++) {
    imageData.data[i] = Math.round(255 * Math.random());
  }

  context.putImageData(imageData, 0, 0);
</script>

Run

Results:

height : Number readonly

The height of the buffer in pixels.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var imageData = context.createImageData(100, 150);

  console.log(imageData.height);
</script>

Run

Results:

width : Number readonly

The width of the buffer in pixels.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var imageData = context.createImageData(100, 150);

  console.log(imageData.width);
</script>

Run

Results:

home license contribute feedback toggle light/dark mode