Sygnalizator drogowy (HTML5 canvas)

Sygnalizator

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 160, 420);
var x1 = 80;
var y1 = 80;//red
var y2 = 210//yelllow
var y3 = 340//green
var counter = 0;
var times = new Array(3000, 1000, 3000, 2000);
function fillCircle(x, y, fillStyle) {
	ctx.beginPath();
	ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
	ctx.fillStyle = fillStyle;
	ctx.fill();
};
function changeLight() {
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, 160, 420);
	if (counter > 3) {
		counter = 0;
	}
	if (counter == 0) {
		fillCircle(80, 80, "red");
	} else if (counter == 1) {
		fillCircle(80, 80, "red");
		fillCircle(80, 210, "yellow");
	} else if (counter == 2) {
		fillCircle(80, 340, "green");
	} else if (counter == 3) {
		fillCircle(80, 210, "yellow")
	}
	setTimeout(changeLight, times[counter])
	counter++;
};
changeLight();