Random Character Generator Code

<html>

<head>

    <title>Avatar Maker</title>

<script>

window.onload = function ()
    {
        //head
        var robothead = new Image();
        var robotheadnum=Math.floor(Math.random()*6)+1; //Change "3" to whatever number of head files you have
        var robotheadname="head" + robotheadnum + ".png";
        robothead.src=robotheadname;

        //eyes
        var roboteyes = new Image();
        var roboteyesnum=Math.floor(Math.random()*4)+1; //Change "3" to whatever number of head files you have
        var roboteyesname="eyes" + roboteyesnum + ".png";
        roboteyes.src=roboteyesname;

         //mouth
         var robotmouth = new Image();
        var robotmouthnum=Math.floor(Math.random()*6)+1; //Change "3" to whatever number of head files you have
        var robotmouthname="mouth" + robotmouthnum + ".png";
        robotmouth.src=robotmouthname;

        //body
        var robotbody = new Image();
        var robotbodynum=Math.floor(Math.random()*4)+1; //Change "3" to whatever number of head files you have
        var robotbodyname="body" + robotbodynum + ".png";
        robotbody.src=robotbodyname;

        //background
        var robotbackground = new Image();
        var robotbackgroundnum=Math.floor(Math.random()*36)+1; //Change "3" to whatever number of head files you have
        var robotbackgroundname="background" + robotbackgroundnum + ".png";
        robotbackground.src=robotbackgroundname;

        //hue overlay - THIS PART NEEDS TO CHANGE BUT I DON'T KNOW HOW TO FIX IT
        var robothue = new Image();
        var robothuename = "hue";
        robothue.src = robothuename;
        robothue.style.filter =

        //head loaded
        robothead.onload=function()
        {
            buildrobot();
        }

        //eyes loaded
        roboteyes.onload=function()
        {
            buildrobot();
        }

        //mouth loaded
         robotmouth.onload=function()
        {
            buildrobot();
        }

        //body loaded
        robotbody.onload=function()
        {
            buildrobot();
        }

        //body loaded
        robotbackground.onload=function()
        {
            buildrobot();
        }

        //hue loaded
        robothue.onload=function()
        {
            buildrobot();
        }

        function buildrobot()
        {
            var canvas=document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width=1120;
            canvas.height=1120;

            //draw body
            ctx.drawImage(robotbackground,((1120-robotbody.width)/2),0);
            //draw body
            ctx.drawImage(robotbody,((1120-robotbody.width)/2),0);
            //draw eyes
            ctx.drawImage(roboteyes,((1120-roboteyes.width)/2),0);
            //draw mouth
            ctx.drawImage(robotmouth,((1120-robotmouth.width)/2),0);
            //draw head
            ctx.drawImage(robothead,((1120-robothead.width)/2),0);
            //draw hue
            ctx.drawImage(robothue,((1120-robothue.width)/2),0);
        }
    }

</script>

</head>

<body>

    <div align="center">
        <canvas id="canvas" style="border:5px solid #000000;"></canvas>
        <br><br>
        <button onClick="window.location.reload();"> Generate! </button>
    </div>

</body>

</html>