Grayscale Generated with Canvas Pixel Manipulation

by jrweinb

HTML

<canvas id="canvas1" width="100", height="100">
Random Canvas
</canvas>

<canvas id="canvas2" width="100", height="100">
Ranhttp://jsfiddle.net/#savedom Canvas
</canvas>

JavaScript

function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

function setPixel2(imageData2, x, y, r, g, b, a) {
    index = (x + y * imageData2.width) * 4;
    imageData2.data[index+0] = r;
    imageData2.data[index+1] = g;
    imageData2.data[index+2] = b;
    imageData2.data[index+3] = a;
}

element = document.getElementById("canvas1");
c = element.getContext("2d");

element2 = document.getElementById("canvas2");
c2 = element2.getContext("2d");

// read the width and height of the canvas
width = element.width;
height = element.height;
width2 = element2.width;
height2 = element2.height;
// create a new pixel array
imageData = c.createImageData(width, height);
imageData2 = c2.createImageData(width2, height2);


//r * 0.2989 + g * 0.5870 + b * 0.1140
// 0.2989, 0.5870, 0.1140.
// 0.2126 * R + 0.7152 * G + 0.0722 * B
// draw random dots
/*for (i = 0; i < 10000; i++) {
    x = Math.random() * width | 0; // |0 to truncate to Int32
    y = Math.random() * height | 0;
    r = ((Math.random() * 256) *.2989 ) | 0;
    g = ((Math.random() * 256) *.2152 ) | 0;
    b = ((Math.random() * 256) *.0722 ) | 0;
    a = (Math.floor(Math.random()*255));
    var xx = (r + g + b) / 3;
    setPixel(imageData, x, y, r, g, b, a); // 255 opaque
   // setPixel2(imageData2, x, y, xx, xx, xx, a); // 255 opaque

}*/

for (i = 0; i < 10000; i++) {
    x = Math.random() * width | 0; // |0 to truncate to Int32
    y = Math.random() * height | 0;
    r = ((Math.random() * 256) *.2989 ) | 0;
    g = ((Math.random() * 256) *.2152 ) | 0;
    b = ((Math.random() * 256) *.0722 ) | 0;
    a = (Math.floor(Math.random()*185));
    var xx = (r + g + b) / 3;
   // setPixel(imageData, x, y, r, g, b, a); // 255 opaque
    setPixel2(imageData2, x, y, xx, xx, xx, a); // 255 opaque
    /*var dec = r << 16 + g << 16 + b;
    console.log("a" +...