I have code that loads a bunch of images into hidden img elements and then a Javascript loop which places each image onto the canvas. However, I want to clip each image so that it is a circle when placed on the canvas.

My loop looks like this:

    $$('#avatars img').each(function(avatar) {
        var canvas = $('canvas');
        var context = canvas.getContext('2d');

        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);

        context.beginPath();
        context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1);
        context.clip();

        context.strokeStyle = "black";

        context.drawImage(document.getElementById(avatar.id), x, y);

        context.stroke();
    });

Problem is, only the first image is drawn (or is visible).

If I remove the clipping logic:

    $$('#avatars img').each(function(avatar) {
        var canvas = $('canvas');
        var context = canvas.getContext('2d');

        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);

        context.drawImage(document.getElementById(avatar.id), x, y);
    });

Then all my images are drawn.

Is there a way to get each image individually clipped?

I tried resetting the clipping area to be the entire canvas between images but that didn't work.