duda con canvas y repeticion de imagen

Ferdinand1945 · #1 (**permalink**) 15/11/2013, 11:13

Hola amigos! tengo una duda con un trabajo de canvas que estoy haciendo. Tengo que hacer un efecto de gotas de lluvia sobre un fondo. Anime la gota de lluvia para que caiga verticalmente, pero mi pregunta es... como hago para repetir esa misma imagen para que hayan muchas gotas a la misma vez? paso aca el codigo que hice:

Código HTML:

<html lang="en">
  <head>
    <title>Canvas Regn</title>
    <script type="text/javascript">
	var ctx;
	var imgBg;
	var imgDrops;
        var x= 0;
        var y= 20;
	
        function setup() {
            var canvas = document.getElementById('canvasRegn');

            if (canvas.getContext) {
					ctx = canvas.getContext('2d');
			setInterval('draw();', 36);
			imgBg = new Image();
			imgBg.src = 'dimma.jpg';
			
			imgDrops = new Image();
			imgDrops.src = 'drop.png';
			
			}
        }

	function draw()	{
	    drawBackground();

            <!--regndroppe--><!--gota de lluvia-->
				
		ctx.drawImage (imgDrops, x, y); 
                y += 0.5;
                if(y > 400) {
                y=-50;
                x = Math.random() * 300;
                }
		}

	function drawBackground(){
	    <!-- bakgrund -->	
		ctx.drawImage(imgBg, 0, 0);
	}
    </script>
  </head>
  <body onload="setup();">
    <canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
  </body>
</html>

Bueno hasta aca todo bien, me funciona bien la animacion pero como comente antes, no se como repetir la "gota de agua"(imgDrops.src = 'drop.png';) para que haya muchas y no una sola corriendo random por el background. Desde ya les agradezco a todos por su ayuda o simplemente por tomarse el tiempo de leer mi duda!