Check of a traffic light sequence using an array and if statements
you don't ever use the strings in colors, but use them only as kind of id, what you are showing: an index would be sufficient, even the better solution.
you don't use the order in colors but instead you jump manually; sub-optimal, especially since you don't have any logic in there but just run a simple loop
And you repeat yourself excessively.


You have three lights, that are either on or off. To me this screams for the use of a bit-mask: The State is represented by an integer, and each bit of this integer represents one of the lights: it's either 1 or 0.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(0, 0, 200, 300);
ctx.fillStyle = "grey";
ctx.fill();

//an array of the states, the code loops through
var activeLights = [0b100, 0b110, 0b001, 0b000, 0b010];
//var activeLights = [4, 6, 1, 0, 2];   //if your browser doesn't get the binary-notation
var currentIndex = 0;

function drawLight(index, color){
    ctx.beginPath();
    ctx.arc(95,50+index*100,40,10,12*Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
}

function changelight(){
    var state = activeLights[currentIndex];

    //check the bit and draw the respective light
    drawLight(0, state &amp; 0b100? "red": "black");
    drawLight(1, state &amp; 0b010? "yellow": "black");
    drawLight(2, state &amp; 0b001? "green": "black");      
    //drawLight(0, state &amp; 4? "red": "black");
    //drawLight(1, state &amp; 2? "yellow": "black");
    //drawLight(2, state &amp; 1? "green": "black");

    //the loop
    if(++currentIndex === activeLights.length) currentIndex = 0;
}

setInterval(changelight, 1000);