Pixels and Image Data

Image Data Write

createImageData allocates a blank pixel block, a loop fills the typed array with a sky-blue color, and putImageData copies those bytes into the canvas bitmap.

Program

Pixel writes live entirely in JavaScript memory until putImageData runs. Building the typed array does not paint anything; the bitmap update happens in one step.

image_data_write.html
Visuals: captured from real browser rendering
<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  const image = ctx.createImageData(120, 80);
  const data = image.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 14;
    data[i + 1] = 165;
    data[i + 2] = 233;
    data[i + 3] = 255;
  }
  ctx.putImageData(image, 120, 65);
</script>

  1. Allocate a blank ImageData block.

    The canvas is blank because createImageData only allocates JavaScript memory.
    A new ImageData starts as transparent zero bytes; the canvas is unchanged.

  2. Fill the typed array with sky-blue bytes.

    The canvas is still blank; the typed-array writes only mutate JavaScript memory.
    The canvas bitmap does not change until putImageData runs.

  3. Copy the typed array into the canvas bitmap.

    A sky-blue block appears in the center of the canvas.
    putImageData copies the bytes from ImageData into the canvas bitmap at the requested origin.
createImageData createImageData allocates a typed-array buffer for canvas pixel bytes.
putImageData putImageData copies pixel bytes into the canvas bitmap.