javascript - Using canvas to display a picture pixel by pixel within secs -

for learning purpose, trying display image pixel pixel in canvas within few seconds, below code write

var timestamps = []; var intervals = []; var c = document.getelementbyid('wsk'); var ctx = c.getcontext("2d"),     img = new image(),     i; img.onload = init; img.src = "http://placehold.it/100x100/000000"; var points = []; function init(){   ctx.canvas.width = img.width;   ctx.canvas.height = img.height;   (i=0; i<img.width*img.height; i++) {     points.push(i);   }   window.m = points.length;   var sec = 10; //animation duration    function animate(t) {     timestamps.push(t);     var pointsperframe = math.floor(img.width*img.height/sec/60)+1;     var start = date.now();     (j=0; j<pointsperframe; j++) {       var = math.floor(math.random()*m--); //pick point       temp = points[i];       points[i] = points[m];       points[m] = temp;   //swap point last element of points array       var point = new point(i%img.width,math.floor(i/img.width));  //get(x,y)       ctx.fillstyle = "rgba(255,255,255,1)";       ctx.globalcompositeoperation = "source-over";       ctx.fillrect(point.x,point.y,1,1); //draw dozens of points within 1 frame     }     ctx.globalcompositeoperation = "source-in";//only display overlapping part of new content , old cont     ctx.drawimage(img,0,0); //image transparent areas itself, draw image on points on screen, exluding points don't overlap image.     var time = date.now()-start;     intervals.push(time);     if( m > 0 ) requestanimationframe(animate);   }   animate(); }  function point(x,y) {   this.x = x;   this.y = y; } 

live test: www.weiwei-tv.com/test.php. expecting dots appear total randomly , fill out whole 100*100 canvas. real happens every time upper half of picture gets displayed many dots in lower half missed. guess problem technique use randomly pick dots, page, can't find wrong in it.

another thing notice intervals 1ms or 0ms, means javascript takes little time draw 100*100/10/60 dots , draw image upon within every frame. however, differences between timestamps 30~50ms, should 16ms(1000/60). not sure if plays part in failure of code.

the problem using index of points array compute point coordinates. need use value of chosen point (which moved m-th position).

so, change

var point = new point(i%img.width,math.floor(i/img.width)); 

to

var point = new point(points[m]%img.width,math.floor(points[m]/img.width));