canvas experiment

by mmarcon

HTML

<img src="http://jsfiddle.net/img/logo.png" id="csource"/>

<canvas id="canvas" width="500" height="375">
    
</canvas>

CSS

#csource {
    display: none;
}

canvas {
    margin: 20px auto;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #ccc;
    width: 500px;
    height: 375px;
    display: block;
}

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    image = document.getElementById('csource');

context.drawImage(image, 0, 0);

var imgData = context.getImageData(0, 0, 500, 375), pix = imgData.data,
    i = 0, n = pix.length, grayscale;
for (; i < n; i += 4) {
    grayscale = pix [i] * .3 + pix [i + 1] * .59 + pix [i + 2] * .11;
    pix [i] = grayscale;
    pix [i + 1] = grayscale;
    pix [i + 2] = grayscale;
    pix [i + 3] = 255;
}
context.putImageData(imgData, 0, 0);