Canvas ImageData load and grayscale Image

Example

by Niklas Knaack

JavaScript

var canvas = document.createElement( 'canvas' );
	canvas.width = 600;
	canvas.height = 400;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );

function grayscaleImage() {

	var imageData = context.getImageData ( 0, 0, 600, 400 );
    var data = imageData.data;

    for ( var i = 0, l = data.length; i < l; i += 4 ) {
    
    	var rgb = Math.round( ( data[ i ] + data[ i + 1 ] + data[ i + 2 ] ) / 3 );

        data[ i ]     = rgb;
        data[ i + 1 ] = rgb;
        data[ i + 2 ] = rgb;
        data[ i + 3 ] = 255;

    }
    
    context.putImageData( imageData, 0, 0 );

}

var image = document.createElement( 'IMG' );
    image.onload = function () {
    
        context.drawImage( image, 0, 0 );
        
        grayscaleImage();
        
    }
    image.crossOrigin = "anonymous";
	image.src = 'http://nkunited.de/ExternalImages/jsfiddle/pexels-photo-595879_mod_600x400.jpg';