Not able to set steady setTimeout

[tejasagawane]

I want to draw ECG waveform , I have used following logic , i am drawing points that fill in my canvas (i have used specified time stamp after each line drawn so that we can plot the graph points slowly using setTimeout()) and (for redrawing) after that for next points that are not fit in my canvas i am redrawing graph from (next point to previous starting point ) to (next point to previous end point) but here i can not get same time stamp as previous during redrawing next points and so on for next redrawing ...

My coding logic is

setTimeout(function doDraw() {
var y=0.1;

if(i==0)
{ copyendx=5;
copyendy=50;
startx=5+x;
starty=50;
}

if(count==0)
{ startx=5+x;
starty=50-(leaderpointsFirst[i]*y);
endx=(5+x);
endy=50-(leaderpointsFirst[i]*y);
drawLine(context,startx,starty,copyendx,copyendy);
i++;
x=x+5;
copyendx=endx;
copyendy=endy;
}

if(count>=1)
{
startx=5+x;
starty=50-(leaderpointsFirst[i+index]*y);
endx=5+x;
endy=50-(leaderpointsFirst[i+index]*y);
drawLine(context,startx,starty,copyendx,copyendy);
i++;
x=x+5;
copyendx=endx;
copyendy=endy;
if([i+index]>leaderpointsFirst.length)
{
return;
}
}

//plot next points which has canvas width>400
if(x>400)
{
if(x==405)
{
startx=5;
endx=5;
starty=50-(leaderpointsFirst[i+index]*y);
endy=50-(leaderpointsFirst[i+index]*y);
drawLine(context,startx,starty,copyendx,copyendy);
i++;
x=x+5;
copyendx=endx;
copyendy=endy;
}
index++;
count++;
x=5;
y=0.1;
graphCanvas.width=graphCanvas.width;
i=0;
doDraw();
}


if (i < leaderpointsFirst.length) {
setTimeout(doDraw, 10);
}


},10);


function drawLine(contextO, startx, starty, endx, endy)
{
contextO.beginPath();
contextO.moveTo(startx, starty);
contextO.lineTo(endx, endy);
contextO.closePath();
contextO.strokeStyle="green";
contextO.stroke();
}

[rnd me]

use setInterval for repeating firings, it's generally more uniform timing than chained setTimeouts are in my experience.