Pixel Manipulation on Canvas in JavaScript｜How to Use getImageData and putImageData

Pixel Manipulation on Canvas in JavaScript｜How to Use getImageData and putImageData

Do you want to manipulate Canvas pixels in JavaScript but aren’t sure which methods to use?
In this article, we’ll explain in detail how to retrieve and edit pixel data using getImageData and putImageData.

First, obtain the drawing context using the canvas getContext method:
let can = document.getElementById("mycanvas");
let ctx = can.getContext("2d", {willReadFrequently: true});

By using the method getImageData(x, y, width, height), you can retrieve pixel‑level color information as an array in the format (r, g, b, a, r, g, b, a, ...).
let d = ctx.getImageData(0, 0, width, height);

You can modify the values in the retrieved color array to change pixels individually.
// Change the red component of the top‑left pixel to 255
d.data[0] = 255;
// Change the green component of the top‑left pixel to 0
d.data[1] = 0;
// Change the blue component of the top‑left pixel to 0
d.data[2] = 0;
// Change the alpha (opacity) of the top‑left pixel to 255 (fully opaque)
d.data[3] = 255;

Finally, use putImageData(pixelArray, x, y) to write the modified pixel data back to the canvas.
ctx.putImageData(d, 0, 0);

Example

Source Code

<button onclick="redDraw()">Fill the canvas with red at the pixel level</button><br>
<button onclick="randomDraw()">Paint the canvas with random colors</button><br>
<button onclick="gradationDraw()">Apply a color gradient to the canvas</button><br>
<canvas id="mycanvas" style="width:200px;height:200px" width="200" height="200">

<script>
function redDraw(){
  // Get the canvas
  let can=document.getElementById("mycanvas");

  // Get the drawing context
  let ctx=can.getContext("2d",{willReadFrequently:true});

  // Get the width and height of the canvas drawing area
  let w=can.width;
  let h=can.height;

  // Retrieve the pixel color data from the canvas
  let d=ctx.getImageData(0,0,w,h);

  // Modify the pixel color array
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      // Each pixel is represented by 4 array elements
      //Set the red component to 255
      d.data[ (y*w+x)*4 + 0 ] = 255;
      //Set the green component to 0
      d.data[ (y*w+x)*4 + 1 ] = 0;
      //Set the blue component to 0
      d.data[ (y*w+x)*4 + 2 ] = 0;
      // Set the alpha (opacity) to 255 (fully opaque)
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }

  // Apply the modified pixel data to the canvas
  ctx.putImageData(d, 0, 0);
}



function randomDraw(){
  // Get the canvas
  let can=document.getElementById("mycanvas");

  // Get the drawing context
  let ctx=can.getContext("2d",{willReadFrequently:true});

  // Get the width and height of the canvas drawing area
  let w=can.width;
  let h=can.height;

  // Retrieve the pixel color data from the canvas
  let d=ctx.getImageData(0,0,w,h);

  // Modify the pixel color array
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      // Each pixel is represented by 4 array elements
      //Assign a random value to the red component
      d.data[ (y*w+x)*4 + 0 ] = Math.floor(Math.random()*256);
      //Assign a random value to the green component
      d.data[ (y*w+x)*4 + 1 ] = Math.floor(Math.random()*256);
      //Assign a random value to the blue component
      d.data[ (y*w+x)*4 + 2 ] = Math.floor(Math.random()*256);
      // Set the alpha (opacity) to 255 (fully opaque)
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }

  // Apply the modified pixel data to the canvas
  ctx.putImageData(d, 0, 0);
}



function gradationDraw(){
  // Get the canvas
  let can=document.getElementById("mycanvas");

  // Get the drawing context
  let ctx=can.getContext("2d",{willReadFrequently:true});

  // Get the width and height of the canvas drawing area
  let w=can.width;
  let h=can.height;

  // Retrieve the pixel color data from the canvas
  let d=ctx.getImageData(0,0,w,h);

  // Modify the pixel color array
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      // Each pixel is represented by 4 array elements
      //Set the red component to y
      d.data[ (y*w+x)*4 + 0 ] = y;
      //Set the green component to x
      d.data[ (y*w+x)*4 + 1 ] = x;
      //Set the blue component to 100
      d.data[ (y*w+x)*4 + 2 ] = 100;
      // Set the alpha (opacity) to 255 (fully opaque)
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }

  // Apply the modified pixel data to the canvas
  ctx.putImageData(d, 0, 0);
}
</script>