The createImageData function

• Arguments to the function
• An example

The createImagedata function allows you to create an Imagedata object for you to manipulate and then add back onto the canvas with the putImageData function. The function can be called with either the width and height of the image data or you can also pass it another ImageData object from which to get the dimensions (the data in the ImageData object is not copied).

However you create the object - the values are all initialised to zero - ie the pixels are all transparent black.

For each pixel in the ImageData array, there are four values - which correspond to red, green, blue and alpha. All of the values can be from 0 - 255.

Once you have manipulated the pixel information you can put the data back on to the canvas with the putImageData function

Arguments to the function

• The width of the section to get
• The height of the section to get

Or:

• Another ImageData object (from which to get the size only)

An example

<script>
    window.onload = function ()
    {
        var canvas = document.getElementById('cvs');
        var context = canvas.getContext('2d');
        
        // Fetchs image data from the canvas
        var imgData = context.createImageData(600,250);
    }
</script>