Canvas Prototype: Desaturate

HTMLCanvasElement.prototype.desaturate.js

HTMLCanvasElement.prototype.desaturate = function () {
	var
	canvas = this,
	context = canvas.getContext('2d'),
	imageData = context.getImageData(0, 0, canvas.width, canvas.height),
	canvasPixelArray = imageData.data,
	canvasPixelArrayLength = canvasPixelArray.length,
	i = 0,
	grayscale = 0;

	for (; i < canvasPixelArrayLength; i += 4) {
		grayscale = canvasPixelArray[i] * 0.3 + canvasPixelArray[i + 1] * 0.59 + canvasPixelArray[i + 2] * 0.11;

		canvasPixelArray[i] = grayscale;
		canvasPixelArray[i + 1] = grayscale;
		canvasPixelArray[i + 2] = grayscale;
	}

	context.putImageData(imageData, 0, 0);

	return canvas;
};