Gestion de 2 cartes + affichage du résultat actuel

code/index.html

@@ -1,18 +1,39 @@
 
 <canvas id="canvas" style="border:1px solid #000"></canvas>
+<button onclick="tourneG(tab,canvas,ctx)">Tourner G</button>
+<button onclick="tourneD(tab,canvas,ctx)">Tourner D</button>
+
+<canvas id="canvas2" style="border:1px solid #000"></canvas>
+<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
+<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>
+
+<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
 
 <script>
     var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext('2d');
+
+    var canvas2 = document.getElementById('canvas2');
+    var ctx2 = canvas2.getContext('2d');
+
+    var canvasT = document.getElementById('canvasTotal');
+    var ctxT = canvasT.getContext('2d');
 
 tab=[];
+tab2=[];
+tabTotal=[];
 
 width=300; // 6 lignes de 50px
 height=300; // 6 colonnes de 50px
 canvas.width=width;
+canvas2.width=width;
+canvasT.width=width;
+
 canvas.height=height;
+canvas2.height=height;
+canvasT.height=height;
 
-function faireCercle(x,y,color){
+function faireCercle(x,y,color,lectx){
     var cercle = new Path2D();
 
     nx=50*(x>0 ? x+2 : x+3);
@@ -21,48 +42,63 @@ function faireCercle(x,y,color){
     cercle.moveTo(nx, ny);
     cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
 
-    ctx.fillStyle = color;
+    lectx.fillStyle = color;
-    ctx.fill(cercle);
+    lectx.fill(cercle);
     //tab.push([x,y,color]);
 }
 
-function tourneG()
+function tourneG(letab,lecanvas,lectx)
 {
-    tab.forEach(element => {
+    letab.forEach(element => {
         tmp=element[0];
         element[0]=element[1];
         element[1]=-tmp;
     });
-    toutDessiner(tab);
+    toutDessiner(letab,lecanvas,lectx);
     //console.log("nv coords "+tab);
+    empiler();
 }
 
-function tourneD()
+function tourneD(letab,lecanvas,lectx)
 {
-    tab.forEach(element => {
+    letab.forEach(element => {
         tmp=element[1];
         element[1]=element[0];
         element[0]=-tmp;
     });
-    toutDessiner(tab);
+    toutDessiner(letab,lecanvas,lectx);
     //console.log("nv coords "+tab);
+    empiler();
 }
 
-function toutDessiner(pts)
+function toutDessiner(pts,lecanvas,lectx)
 {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    //var lectx = lecanvas.getContext('2d');
+
+    lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
     pts.forEach(element=> {
-        faireCercle(element[0],element[1],element[2]);
+        faireCercle(element[0],element[1],element[2],lectx);
     })
 }
 
-tab.push([-3,-3,"green"],[-3,-2,"red"],[-3,-1,"orange"]);
+function empiler()
-toutDessiner(tab);
+{
-//console.log("anc coords " + tab);
+    tabTotal=[];
+    tab.forEach(element => {
+        tabTotal.push(element);
+    })
+    tab2.forEach(element => {
+        tabTotal.push(element);
+    })
 
+    toutDessiner(tabTotal,canvasT,ctxT);
+}
 
-</script>
+tab.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
+tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
+toutDessiner(tab,canvas,ctx);
+toutDessiner(tab2,canvas2,ctx2);
+//console.log("anc coords " + tab);
 
 
-<button onclick="tourneG()">Tourner G</button>
+</script>
-<button onclick="tourneD()">Tourner D</button>