HTML5 canvas "reset" fillStyle

Question

I'm starting to learn work with JavaScript and HTML5's canvas.

I'm trying to draw several elements with different patterns, but I'm getting always the last setted pattern. I tried to use save() and restore() methods to store stack stats but surely I'm making a mistake somewhere, can anybody help me?

window.onload = function(){
    draw(100, 100, "http://www.itexto.net/devkico/wp-content/uploads/2011/03/stackoverflow-logo-250.png");
    draw(0, 0, "http://googlediscovery.com/wp-content/uploads/google-home.png");            

};

function draw(x, y, src) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.save();

    var imageObj = new Image();
    imageObj.onload = function(){
        var pattern = context.createPattern(imageObj, "repeat");

        context.rect(x, y, 100, 100);

        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = src;
    context.restore();
}

Answer 1

.save() and .restore() are a perfectly valid way to do this. Your issue is a classic aync error in that your .restore() code is being called before your callback. In otherwords, this is happening:

context.save()
context.restore();

function(){
    context.fillStyle = pattern;
}

put context.restore() inside your callback function.