changement du fond des vitraux

code/index.css

@@ -58,16 +58,11 @@
 
     flex-direction: column;
   }
-  /*
+  
   .vitrail {
-    background: tomato;
-    padding: 5px;
-    width: 200px;
-    height: 150px;
-    margin-top: 10px;
-    line-height: 150px;
-    color: white;
-    font-weight: bold;
-    font-size: 3em;
-    text-align: center;
-  }*/
+    padding: 15px;
+    background-image: url(ress/fond_tr.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }

code/index.html

@@ -9,19 +9,19 @@
     <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
         <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
             <h1>Résultat</h1>
-            <canvas id="canvasTotal" style="border:1px solid #000"></canvas>
+            <canvas id="canvasTotal" class="vitrail"></canvas>
             <h1>Objectif</h1>
-            <canvas id="canvasObj" style="border:1px solid green"></canvas>
+            <canvas id="canvasObj" class="vitrail"></canvas>
             <button onclick="generateEasy()">gen easy</button>
         </ul>
         <ul id="vitraux" class="vitraux" style="border:2px solid purple">
-            <canvas id="canvas1" class="vitrail" style="background: url(ress/fond.png) no-repeat center center; border:1px solid #000"></canvas>
+            <canvas id="canvas1" class="vitrail"></canvas>
             
-            <canvas id="canvas2" class="vitrail" style="border:1px solid #000"></canvas>
+            <canvas id="canvas2" class="vitrail"></canvas>
             
-            <canvas id="canvas3" class="vitrail" style="border:1px solid #000"></canvas>
+            <canvas id="canvas3" class="vitrail"></canvas>
             
-            <canvas id="canvas4" class="vitrail" style="border:1px solid #000"></canvas>
+            <canvas id="canvas4" class="vitrail"></canvas>
         </ul>
         
         <ul id="canvasR" class="flex-container" style="border:1px solid violet">
@@ -106,12 +106,13 @@
             var nx=(width/6)*(x>0 ? x+2 : x+3);
             var ny=(height/6)*(y>0 ? y+2 : y+3);
             
+            img.src="ress/"+color+".png";
+            
             img.onload = function(){
                 console.log("x:"+x+" y:"+y+" col:"+color);
                 lectx.drawImage(img,nx,ny,width/6,height/6);   
             }
             
-            img.src="ress/"+color+".png";
         }
         
         function tourneG(letab,lecanvas,lectx)