Bonjour,

Je réalise actuellement une application avec la balise canvas. L'utilisateur a la possibilité de modifié le contenu de la balise en choisissant divers options. Une option est en fait représenté par une image (png) qui est dessinée (drawimage()) à l'intérieur de canvas. Chaque fois que l'utilisateur choisi une option, le contenu de la balise canvas est entièrement redessiné. Voici le code qui me permet de réaliser cela

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
    function draw(){
        //Efface le contenu de canvas
        canvas.width=canvas.width;
        var img = new Image();
        img.src = srcvolets;
        img.onload = function(){
            if(volets=='furno'){
                ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
            }else{
                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);                  
                    //Test si un style est applique à la sculpture
                    if(srcsculpture!=null){
                        var img3 = new Image();
                        img3.src = cheminsculpt+srcsculpture;
                        img3.onload = function(){
                            //Si le volet est different de furno alors les sculpture sont placee 7px plus bas
                            if(volets=='furno'){
                                ctx.drawImage(img3, 175, 235);
                            }else{
                                ctx.drawImage(img3, 175, 242);
                            }                           
                        }
                    }
                    if(srcsculpture2!=null){
                        var img4 = new Image();
                        img4.src = cheminsculpt+srcsculpture2;
                        img4.onload = function(){
                            if(volets=='furno'){
                                ctx.drawImage(img4, 260, 235);
                            }else{
                                ctx.drawImage(img4, 260, 242);
                            } 
                        }
 
                    }
                    if(srcsculpture3!=null){
                        var img5 = new Image();
                        img5.src = cheminsculpt+srcsculpture3;
                        img5.onload = function(){
                            if(volets=='furno'){
                                ctx.drawImage(img5, 355, 235);
                            }else{
                                ctx.drawImage(img5, 355, 242);
                            } 
                        }
                    }
                }
            }                           
        }
    }
Ma fonction draw efface à chaque fois le contenu de la balise canvas, puis redessine chaque image qui a été choisie. Le problème c'est que sous opera ça ne fonctionne pas. Je pense que c'est à cause de onload(). Cela fonctionne une fois sur deux. Je ne sais pas si opera met en cache les images ou je ne sais quoi. Bref, j'ai besoin d'aide... J'espère avoir été clair.

Merci.