Question

When trying to run multiple drawings in canvas I’ve noticed that with the wrong timing things could get messed up.

I.e. have canvas draw a line out via a interval; then duplicate that (line draw) multiple times and set each one’s stroke color to be different… In the end, you get stroke colors going to other lines and etc…

Is there a way to have multiple drawing instances (context.ctx) that can’t interfere with others?

Example of interval code below:

    it.ctx.strokeStyle = "rgba(200,200,0,.1)"
    it.ctx.fillStyle = "rgba(255,255,22,.01)";
    var p = i.p.split(",");

    var rp = setInterval(function(){
        if(cc>=20){
            clearInterval(rp);
            it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
            return;
        }
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    },30);

Answer 1

If you have other code running in between calls to this interval function that modify strokeStyle and fillStyle, you’ll need to explicitly set these values each time you draw on the canvas:

var p = i.p.split(",");
var rp = setInterval(function(){
    it.ctx.save(); // Save the current canvas styles.

    it.ctx.strokeStyle = "rgba(200,200,0,.1)";
    it.ctx.fillStyle = "rgba(255,255,22,.01)";

    if(cc>=20){
        clearInterval(rp);
        it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
    }
    else {
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    }

    it.ctx.restore(); // Restore the original canvas styles.
},30);

If you don’t set your strokeStyle and fillStyle in the interval function, the canvas will use whatever the outside “background” code has established.