Modificar pixeles de canvas Html5

Funciona en:

En este tutorial vamos a aprender como pintar pixel a pixel un canvas de Html 5, la dificultad del tutorial es media. De ejemplo en este tutorial vamos a crear una nube de pixeles aleatoriamente situados, los colores serán rgba de tonos aleatorios. El resultado final del tutorial sería este:

Lo primero que vamos a hacer es crear un canvas Html5:

<canvas id="canvas" width="900" height="900">
(texto si el navegador no soporta canvas)
</canvas>

Una vez creado el canvas vamos a escribir el Javascript que será el encargado de calcular el color, la localización y cantidad de pixeles. El codigo está totalmente comentado, si tenéis alguna duda no dudéis en escribirlo en un comentário:

<!-- Iniciamos el javacript encargado de manipular todos los pixeles-->
<script type="text/javascript">
// Función pixel para dónde colocar los pixeles y canales de color
function pixel(imageData, x, y, r, g, b, a){
//en los pixels al ser rgba hay que multiplicarlo por 4
inicial = (x + y * imageData.width) * 4;
//seleccionamos pixel con matriz
//indicamos el pixel(inicial) + el canal rgba
//canal 0 es rojo
imageData.data[inicial+0] = r;
//canal 1 es verde
imageData.data[inicial+1] = g;
//canal 2 es azul
imageData.data[inicial+2] = b;
//el 3 sería el opaco
imageData.data[inicial+3] = a;
}
//seleccionamos el canvas 
el_canvas = document.getElementById("canvas");
dibujo = el_canvas.getContext("2d");

// Cogemos el ancho y alto del canvas
width = parseInt(el_canvas.getAttribute("width"));
height = parseInt(el_canvas.getAttribute("height"));

//creamos un pixel array
imageData = dibujo.createImageData(width, height);

//1000001 pixel y posiciones aleatorias
for (i = 0; i < 1000001; i++) {
//calculamos las posiciones aleatoria
x = parseInt(Math.random() * width);
y = parseInt(Math.random() * height);
//calculamos el tono del color de manera aleatoria
r = parseInt(Math.random() * 256);
g = parseInt(Math.random() * 256);
b = parseInt(Math.random() * 256);
//La a será la propiedad opaco
a = 0xff;
//llamamos a la funcion pixel para crear pixel y 
//pasamos los parametros
pixel(imageData, x, y, r, g, b, a)
}

//lo imprimimos en el canvas y las coordenadas
dibujo.putImageData(imageData, 0, 0);
</script>

Para ver un ejemplo en vivo haga click en el siguiente botón:

No olvide escribir su comentario!!!