[ИП] Семафор

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #0e1606;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body onload="turnOn()">
<canvas id="myCanvas" height="360px" width="150px" onclick="iskluchi()"></canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var redOn = false,yellowOn = false,greenOn = false;
    var redOff = true, yellowOff = true, greenOff = true;
    var flag = false;
    var click = false;
    var time,iskluchen;

    function init(){
        //crveno
        ctx.beginPath();
        ctx.fillStyle = "#A11908";
        ctx.arc(70,60,50,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();

        //zolto
        ctx.beginPath();
        ctx.fillStyle = "#CBAF0F";
        ctx.arc(70,165,50,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();

        //zeleno
        ctx.beginPath();
        ctx.fillStyle = "#466D1B";
        ctx.arc(70,270,50,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();
    }

   function turnOn () {

        init();
        click = false;
        clearInterval(iskluchen);

        time = setInterval( function() {

            if (greenOff) {

                ctx.beginPath();
                ctx.fillStyle = "#7EF910";
                ctx.arc(70, 270, 50, 0, 2 * Math.PI);
                ctx.fill();
                ctx.closePath();

                greenOff = false;
                greenOn = true;
            } else if (greenOn)
            {
                ctx.beginPath();
                ctx.fillStyle = "#466D1B";
                ctx.arc(70,270,50,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();

                yellowOff = true;
                flag = false;
                greenOn = false;
            }
            else if(yellowOff)
            {
                ctx.beginPath();
                ctx.fillStyle = "#FFF200";
                ctx.arc(70,165,50,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();

                yellowOff = false;
                yellowOn = true;
            } else if(yellowOn){

                ctx.beginPath();
                ctx.fillStyle = "#CBAF0F";
                ctx.arc(70,165,50,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();

                yellowOn = false;
                if(flag) greenOff = true;
                else redOff = true;
            } else if(redOff)
            {
                ctx.beginPath();
                ctx.fillStyle = "#FF0009";
                ctx.arc(70,60,50,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();

                redOff = false;
                redOn = true;
            } else if(redOn)
            {
                ctx.beginPath();
                ctx.fillStyle = "#A11908";
                ctx.arc(70,60,50,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();

                redOn = false;
                yellowOff = true;
                flag = true;
            }


        },1000);


    };

    function iskluchi(){
       init();
        yellowOff = true;

        clearInterval(time);

        if(click) {
            turnOn();
        }

        click = true;

       iskluchen = setInterval(function () {

           if(yellowOff)
           {
               ctx.beginPath();
               ctx.fillStyle = "#FFF200";
               ctx.arc(70,165,50,0,2*Math.PI);
               ctx.fill();
               ctx.closePath();

               yellowOff = false;
               yellowOn = true;
           } else if(yellowOn){

               ctx.beginPath();
               ctx.fillStyle = "#CBAF0F";
               ctx.arc(70,165,50,0,2*Math.PI);
               ctx.fill();
               ctx.closePath();

               yellowOn = false;
               yellowOff = true;
           }

       }, 1000);

    }


</script>

</body>
</html>