Html5 canvas, delay drawing 2 lines

Question

I wanna draw a 2 lines. First should be start a 3 sec after open the page, and this is no problem, second line (and later another) should start drawing after when first will finish (or maybe later will be 3sec when finish first, or click on the button).

There is a code of this lines, but i don't know how to do that, i can only make a 2 lines in this same time.

var amount = 0;
var amountt=1;
var startX = 0;
var startY = 0;
var endX = 500;
var endY = 300;
var startXx = 0;
var startYy = 0;
var endXx = 500;
var endYy = -300;    

setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }

        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        ctx.stroke();                   

        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startXx + (endXx - startXx) * amount, startYy + (endYy - startYy) * amount);
        ctx.stroke();            

    }, 0);

}, 3000);

Answer 1

I'm not sure if this is exactly what you're after, but I took some of what you wrote and interpreted it.

Here is a jsFiddle with the results http://jsfiddle.net/GZSJp/

Essentially you have one interval that is calling to animate a line every 3 seconds. Then you have an inner interval that animates the lines drawing.

var idx = -1;
var startx = [0, 500, 100];
var starty = [0, 0, 300];
var endx = [500, 0, 400];
var endy = [300, 500, 300];

var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

var drawLinesInterval = setInterval(function() {
    if(idx > startx.length)
        clearInterval(drawLinesInterval);

    var linepercentage = 0;
    idx++; //move onto the next line
    var animateInterval = setInterval(function() {
        linepercentage += 0.01;
        if(linepercentage > 1)
        {
            clearInterval(animateInterval);
        }

        ctx.strokeStyle = "black";
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#707070";
        ctx.moveTo(startx[idx], starty[idx]);
        var tempxend = 0;
        var tempyend = 0;
        if(startx[idx] > endx[idx])
            tempxend = startx[idx] - ((startx[idx]-endx[idx])*linepercentage);
        else
            tempxend = startx[idx] + ((endx[idx]-startx[idx])*linepercentage);
        if(starty[idx] > endy[idx])
            tempyend = starty[idx] - ((starty[idx]-endy[idx])*linepercentage);
        else
            tempyend = starty[idx] + ((endy[idx]-starty[idx])*linepercentage);

        ctx.lineTo(tempxend, tempyend);
        ctx.stroke();
    }, 10);
}, 3000);

Let me know if that doesn't answer your question. Thanks.