[Piękny] Czas [przeszły] do końca lekcji

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <!--
        <canvas id="rys1" width="500" height="500" style="border: 1px solid"></canvas>
        -->
        <canvas id="rys2" width="500" height="50" style="border: 1px solid"></canvas>
        <script>
            //TUDU: zrobić należycie to rysowanie prostukonta i wymyśleć rozwiązanie z kołem

            var konce_lekcji = [
                [7, 0],
                [7, 50],
                [8, 40],
                [9, 30],
                [10, 15],
                [11, 15],
                [12, 5],
                [12, 55],
                [13, 45],
                [14, 35],
                [15, 25]
            ];

            const czas_lekcji = 45;
            var nr_kon_lekc = -1;
            /*
            function DodajZeroWiodace(l)
            {
                var w = l;

                if(l < 10)
                    w = "0" + l;

                return w;
            }
            */
            function ZnajdzNrTKoncaLekcji()
            {
                var d = new Date();
                var i = 0;
                var n = -1;
                while (n == -1 && i < konce_lekcji.length)
                {
                    if (d.getHours() <= konce_lekcji[i][0])
                    {
                        if (d.getMinutes() <= konce_lekcji[i][1])
                        {
                            n = i;
                        }
                    }
                    ++i;
                }

                return n;
            }

            function ObliczCzasDoKoncaLekcji(d, n)
            {
                var d2 = new Date();
                d2.setHours(konce_lekcji[nr_kon_lekc][0]);
                d2.setMinutes(konce_lekcji[nr_kon_lekc][1]);
                d2.setSeconds(d.getSeconds());

                var diff = d2 - d;
                var minuty = Math.round(diff / 60000);

                return minuty;
            }

            var rys1 = document.getElementById("rys1");
            var rys2 = document.getElementById("rys2");

            function RysujKolo(ctx, x, y, r, wypelnienie, wsp_pi = 2)
            {
                ctx.beginPath();
                ctx.arc(x,y,r,0,wsp_pi*Math.PI);

                if (typeof(wypelnienie) != "undefined")
                {
                    ctx.fillStyle = wypelnienie;
                    ctx.fill();
                }
                else
                    ctx.stroke();
            }

            /*
            const kolo_tlo = "red";
            const kolo_tlo_czas = "green";
            */
            const prost_tlo = "green";
            const prost_tlo_czas = "#d1c134";
            const tekst_kolor = "black";
            const tekst_czcionka = "20px Verdana";

            function Rysuj()
            {
                //var ctx1 = rys1.getContext("2d");
                var ctx2 = rys2.getContext("2d");

                /*
                var rys1_sz = rys1.width;
                var rys1_wys = rys1.height;
                */

                var rys2_sz = rys2.width;
                var rys2_wys = rys2.height;

                var d = new Date();
                var minuty = ObliczCzasDoKoncaLekcji(d, nr_kon_lekc);

                var ul = minuty / czas_lekcji;
                var prost_szer_czas = rys2_sz * ul;

                /*
                var kolo_x, kolo_y, kolo_r;

                if (c_sz <= c_wys)
                    kolo_r = c_sz / 2;
                else
                    kolo_r = c_wys / 2;

                kolo_r--;

                kolo_x = c_sz / 2;
                kolo_y = c_wys / 2;

                RysujKolo(ctx1, kolo_x, kolo_y, kolo_r, kolo_tlo);
                */

                ctx2.fillStyle = prost_tlo;
                ctx2.fillRect(0, 0, rys2_sz, rys2_wys);

                ctx2.fillStyle = prost_tlo_czas;
                ctx2.fillRect(0, 0, prost_szer_czas, rys2_wys);

                ctx2.fillStyle = tekst_kolor
                ctx2.font = tekst_czcionka;
                ctx2.fillText("0", 0, rys2_wys - 1);

                var nap_czas_do_kon_lek = minuty + "";
                var nap_czas_do_kon_lek_szer = ctx2.measureText(nap_czas_do_kon_lek).width;

                ctx2.fillText(nap_czas_do_kon_lek, prost_szer_czas, rys2_wys - 1);

                var nap_czas_lek_szer = ctx2.measureText("45").width;
                var nap_czas_lek_x = rys2_sz - nap_czas_lek_szer;
                ctx2.fillText("45", nap_czas_lek_x, rys2_wys - 1);

                /*
                var wsp_pi = ul * 2;
                RysujKolo(ctx, kolo_x, kolo_y, kolo_r, kolo_czas_tlo, wsp_pi);
                */

            }

            nr_kon_lekc = ZnajdzNrTKoncaLekcji();
            Rysuj();
            setInterval(Rysuj,1000);
        </script>
    </body>
</html>