javascript - img src doesn't work when I use local files -

i've had problems getting rain effekt on canvas. after searching on google found this

    <script type="text/javascript"> var ctx; var imgbg; var imgdrops; var x = 0; var y = 0; var noofdrops = 50; var fallingdrops = [];  function setup() {     var canvas = document.getelementbyid('canvasregn');      if (canvas.getcontext) {             ctx = canvas.getcontext('2d');                  imgbg = new image();         imgbg.src = "http://lorempixel.com/600/600/sports/";     setinterval(draw, 36);     (var = 0; < noofdrops; i++) {         var fallingdr = new object();         fallingdr["image"] =  new image();     fallingdr.image.src = "http://lorempixel.com/10/10/sports/";          fallingdr["x"] = math.random() * 600;         fallingdr["y"] = math.random() * 5;         fallingdr["speed"] = 3 + math.random() * 5;         fallingdrops.push(fallingdr);         }      } }     function draw() {     drawbackground();      (var i=0; i< noofdrops; i++)     {     ctx.drawimage (fallingdrops[i].image, fallingdrops[i].x, fallingdrops[i].y); //the rain drop      fallingdrops[i].y += fallingdrops[i].speed; //set falling speed     if (fallingdrops[i].y > 450) {  //repeat raindrop when falls out of view     fallingdrops[i].y = -25 //account image size     fallingdrops[i].x = math.random() * 600;    //make appear randomly along width         }      } }  function drawbackground(){       ctx.drawimage(imgbg, 0, 0); //background }      </script> 

the strange thing code works long don't change image source link png-files. copies of file drawn on , on again til canvas's full of lines.

help please!

it seems reason background not rendered.

if don't want have background, have clear canvas before drawing drops @ new positions, or else canvas flood :)

replace: ctx.drawimage(imgbg, 0, 0);
with: clearrect(0, 0, width, height)

see, also, short demo.