Array of images in canvas not working

Question 1

It's bad practice to define a function within a loop. Try defining it outside of the loop with a named function. Also it'd probably be better to set the src of the img after the onload function is attached. Something like:

$(document).ready(function () {

    var c = document.getElementById("myCanvas");
    c.width = $(document).width();
    c.height = $(document).height();
    var ctx = c.getContext("2d");
    var imgArray = new Array();

    imgArray[0] = new Image();
    imgArray[1] = new Image();
    var x = 30;
    var y = 40;

    function onImageLoad() {
        ctx.drawImage(this, x, y);
        x = x + 20;
    }

    for (var i = 0; i < 2; i++) {
        imgArray[i].onload = onImageLoad;
    } 

    imgArray[0].src = "1.png";
    imgArray[1].src = "2.png";
});

If you must have the loop in the function (which you don't), you would need to wrap it within a closure so that each image gets it's own onload function instead of defining the same function which is what happens in your case.

Something similar to the following would probably work:

for (var i = 0; i < 2; i++) {
    imgArray[i].onload = (function(idx) {
        return function() {
            ctx.drawImage(imgArray[idx], x, y);
            x = x + 20;
        }
    })(i)
}

Question 2

This is how you could do it:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    // Source
    var imgArray = new Array();
    imgArray[0] = new Image();
    imgArray[1] = new Image();
    imgArray[0].src = "http://png-2.findicons.com/files/icons/963/very_emotional_emoticons/64/64_18.png";
    imgArray[1].src = "http://png-3.findicons.com/files/icons/963/very_emotional_emoticons/64/64_30.png";

    // Draw Images
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var startX = 0;
    for (var i = 0; i < imgArray.length; i++) {
        ctx.drawImage(imgArray[i], startX, 0);
        startX += 74;
    }
});

</script>

<canvas id="myCanvas"  style="display:block;">
     Your browser does not support the HTML5 canvas tag.
</canvas>

Outputs:

enter image description here

P.S. The images are 64x64 (width x height). So to draw them next to each other with 10px spacing, I add 10 to 64 (width), hence I do startX += 74; and the images draw like that.

You should be able to modify this code to meet your own needs.