w3.unpo<code>todo

// el array de los colores utilizados
var coloresRy = new Array('#3D0726', '#6E5813', '#F39523', '#F5681C', '#F33C2F');
// el canvas
var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (ctx) {
    // elige el color de fondo
    ctx.fillStyle = '#888800';
    // y rellena un rectángulo del tamaño del canvas con este color
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // construye 50 grupos de círculos concéntricos						
    for (var index = 0; index < 50; index++) {
      // escoge al azar las coordenadas del centro del grupo
      var x = Math.floor(Math.random() * canvas.width);
      var y = Math.floor(Math.random() * canvas.height);
      //define el radio del grupo
      var r = Math.floor(Math.random() * 15);
      // construie 5 circulos concentricos
      for (var i = 0; i <= 4; i++) {
		//define los radios de los circulos concentricos
        //el más grande al inicio, el más pequeño al final
		var radio =  r*(5-i); 
        // escoge aleatoriamente el color de cada circulo
        var j = Math.floor(Math.random() * (coloresRy.length + 1));
		// y lo dibuja
        ctx.beginPath();
        ctx.fillStyle = coloresRy[j];
        ctx.arc(x, y, radio, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}