Refresh d'une image dans un canvas

Bonjour,

Je cherche désespérément une solution viable pour mettre à jour une image dans un canvas.
Voici le contexte, je possède une image générée dynamiquement (accessible à une url fixe) et que je souhaite rafraichir toutes les 500ms par exemple, je m'y prend donc de la sorte :

this.intervalId = setInterval(function() {
    var myCanvas = document.getElementById('canvas_test');
    var ctx = myCanvas.getContext('2d');
    var img = new Image();

    // ici j'utilise une chaine dynamique pour éviter la mise en cache
    var imageURL = "http://.....?qstring="+new Date().getTime();

    img.onload = function(){
        myCanvas.width = img.width;
        myCanvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);	
    };
	
    img.src = imageURL;

}, period);

Le problème est que, parfois, mon canvas est mis à jour dans un ordre non chronologique, je cherchais donc un système pour empêcher ce problème. J'avais pensé à un système de lock mais je ne trouve pas de solution propre en javascript.

Auriez vous une solution pour remédier à ce problème ?


J'ai également un second problème lié à l'utilisation de phonegap/jquerymobile avec ce canvas. Je lance mon setInterval lors de l'event jquery mobile "pagecreate" et je voudrais le couper lorsque l'utilisateur quitte la "page".
Pour cela j'appelle "clearInterval(this.intervalId)" mais ça ne semble pas stopper la boucle puisque j'obtiens des erreurs en boucle m'indiquant que mon getContext ne peut pas être appelé sur "undefined". Je suppose qu'il ne trouve plus le canvas, puisque j'ai changé de page, et j'en déduis par la même occasion qu'il n'a pas vraiment arrêté ma boucle.


Merci d'avance et désolé pour le pavé, si je n'ai pas été suffisamment clair n'hésitez pas
Modifié par nuts62 (27 Jun 2012 - 14:01)

nuts62 a écrit :

Merci d'avance et désolé pour le pavé, si je n'ai pas été suffisamment clair n'hésitez pas

Sans hésitation, c'est pas trés clair quel est ton problème exactement?