RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »


Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

The createImageData function

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


An example

    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);