How to create image data in Canvas using JavaScript?

To create a image data object in Canvas, we can use  createImageData(width, height) method. This creates a new blank transparent black image data object in Canvas. For every pixel in this image object ,there are four pieces of information needed to customize them.

R – Red (0 – 255)

G – Green (0 – 255)

B – Blue(0 – 255)

A – Alpha (0/Transparent – 255/Fully visible)

The colour/transparency information is stored in an array. The array can be accessed from data  property of the image data object. We can manipulate the colour information and then place the image object again in canvas using the  putImageData() method.

HTML

JS

OUTPUT

 

Leave a Reply