Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not able to set steady setTimeout

    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();
    }

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,189
    Thanks
    10
    Thanked 569 Times in 550 Posts
    use setInterval for repeating firings, it's generally more uniform timing than chained setTimeouts are in my experience.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •