1

I make an application canvas. Every time I call draw () function, multiple images are drawn in canvas. The problem is that with Opera it does not work. Onload function does not always work.

    function draw(){
    ctx.clearRect (0, 0, canvas.width, canvas.height);
    var img = new Image();
    img.src = srcvolets;
    img.onload = function(){
        ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
        if(srccouleur!=null){
            var img2 = new Image();
            img2.src = 'images/couleurs/'+volets+'/'+srccouleur+'.png';
            img2.onload = function(){
                ctx.drawImage(img2, 0, 0,canvas.width,canvas.height);
                if(srcsculpture!=null){
                    var img3 = new Image();
                    img3.src = cheminsculpt+srcsculpture;
                    img3.onload = function(){
                        if(volets=='furno'){
                            ctx.drawImage(img3, 175, 235);
                        }else{
                            ctx.drawImage(img3, 175, 242);
                        }                           
                    }
                }
}}}}

Thank you. (Sorry for my English, I speak French)

Adrien
  • 37
  • 3

1 Answers1

2

I think this has to do with images being cached, and the onload firing before it is set.

You might need to try setting onload before you set src. See this article about the problem.

James Clark
  • 1,765
  • 13
  • 17
  • As noted in [this question](http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-dataurl-be-available-immediately), you _must_ set the `onload` before the `src` to avoid this issue (and another with IE9). – Phrogz Dec 07 '11 at 03:22