ImageData

Next ❯Save & Restore

It's an object that holds every pixel data of specified rectangular area

  • Used to manipulate pixels of an image, video or canvas
  • turned_in_notImageData Related Methods
    • createImageData()
    • getImageData()
    • putImageData()

  • turned_in_notImageData Object Properties
    • width
    • height
    • data


createImageData( )

Used to create imageData object

Syntax - To create imageData

ctx.createImageData(width, height)

Syntax - To create imageData from another created imageData

ctx.createImageData(imgData)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var imgData=ctx.createImageData(50,50);
for(var i=0; i<imgData.data.length; i+=4) {
  imgData.data[i+0]=255;
  imgData.data[i+1]=100;
  imgData.data[i+2]=100;
  imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
createImageDatasubject
createImageDataclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
var imgData=ctx.createImageData(50,50);
  for(var i=0; i<imgData.data.length; i+=4) {
    imgData.data[i+0]=255;
    imgData.data[i+1]=100;
    imgData.data[i+2]=100;
    imgData.data[i+3]=255;
  }
  ctx.putImageData(imgData,10,10);
</script>
</body>
</html>


getImageData( )

Used to get imageData object information (pixels info) from image, video or canvas

Syntax

ctx.getImageData(x, y, width, height)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font="25px chiller";ctx.fillText("Hello",10,20);
var imgData=ctx.getImageData(10,0,20,20);
for(var i=0; i<imgData.data.length; i+=4) {
    imgData.data[i+0]=150;
}
ctx.putImageData(imgData,50,50);
getImageDatasubject
getImageDataclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.font="25px chiller";ctx.fillText("Hello",10,20);
var imgData=ctx.getImageData(10,0,20,20);
for(var i=0; i<imgData.data.length; i+=4) {
    imgData.data[i+0]=150;
}
ctx.putImageData(imgData,50,50);
</script>
</body>
</html>


putImageData( )

Used to put imageData object on canvas

Syntax

ctx.putImageData(imageData, x, y)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font="25px chiller";ctx.fillText("Hello",10,20);
var imgData=ctx.getImageData(10,0,20,20);
ctx.putImageData(imgData,50,50);
putImageDatasubject
putImageDataclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.font="25px chiller";ctx.fillText("Hello",10,20);
var imgData=ctx.getImageData(10,0,20,20);
ctx.putImageData(imgData,50,50);
</script>
</body>
</html>


ImageData Object Properties

Used to access ImageData object width, height & stored data

width

Used to get imageData object width

Syntax

imageData.width

height

Used to get imageData object height

Syntax

imageData.height

data

Used to set or get imageData object data

  • data caries every pixel information of an area covered by ImageData object

For each pixel data there is four value information, the RGBA values:
    R - red color (from 0-255)
    G - green color (from 0-255)
    B - blue color (from 0-255)
    A - alpha value (from 0-255; 0 is transparent, 255 is fully visible)

Default value of RGBA is 0

Syntax - To get imageData object data

imageData.data[index]

Syntax - To set imageData object data

imageData.data[index] = number

/* Some Info : 
  at every [index%4 == 0] red value can set/get (from 0-255)
  at every [index%4 == 1] green value can set/get (from 0-255)
  at every [index%4 == 2] blue value can set/get (from 0-255)
  at every [index%4 == 3] alpha value can set/get (from 0-255) 
*/

  • Save & Restore
❮ Prev Compositing
Next ❯Save & Restore
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯