Javascript skips first visualitation

Question

I have 2 canvasses that visualize values from 2 different labels. I wrote 2 almost the same javascripts and when I run my application. It skips the first visualitation and only shows the second one. Where is my mistake?

Here is my html code:-

<div><canvas id="canvas" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge" runat="server"></asp:Label>

<div><canvas id="canvas2" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge1" runat="server"></asp:Label>

And here are my 2 javascripts. The only difference now is the canvas/canvas2 and the lblgauge and lblgauge1. Even if I change all the variables in the second script it will still only show the second visualition.

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //Clear the canvas everytime a chart is drawn
            ctx.clearRect(0, 0, W, H);

            //Background 360 degree arc
            ctx.beginPath();
            ctx.strokeStyle = bgcolor;
            ctx.lineWidth = 30;
            ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge1").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //Clear the canvas everytime a chart is drawn
            ctx.clearRect(0, 0, W, H);

            //Background 360 degree arc
            ctx.beginPath();
            ctx.strokeStyle = bgcolor;
            ctx.lineWidth = 30;
            ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

Can somebody tell me how to change my code.

This is what the javascript shows me when it works.