ajout de la possibilité de tourner le dessin vers la gauche ou la droite

code/index.html

@@ -4,21 +4,65 @@
 <script>
     var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
-width=200;
-height=200;
+
+tab=[];
+
+width=300; // 6 lignes de 50px
+height=300; // 6 colonnes de 50px
 canvas.width=width;
 canvas.height=height;
 
 function faireCercle(x,y,color){
     var cercle = new Path2D();
-    cercle.moveTo(x, y);
-    cercle.arc(x+25, y-25, 25, 0, 2 * Math.PI);
+
+    nx=50*(x>0 ? x+2 : x+3);
+    ny=50*(y>0 ? y+2 : y+3);
+
+    cercle.moveTo(nx, ny);
+    cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
 
     ctx.fillStyle = color;
     ctx.fill(cercle);
+    //tab.push([x,y,color]);
 }
 
-faireCercle(50,50,"green");
-faireCercle(50,100,"red");
+function tourneG()
+{
+    tab.forEach(element => {
+        tmp=element[0];
+        element[0]=element[1];
+        element[1]=-tmp;
+    });
+    toutDessiner(tab);
+    //console.log("nv coords "+tab);
+}
+
+function tourneD()
+{
+    tab.forEach(element => {
+        tmp=element[1];
+        element[1]=element[0];
+        element[0]=-tmp;
+    });
+    toutDessiner(tab);
+    //console.log("nv coords "+tab);
+}
+
+function toutDessiner(pts)
+{
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    pts.forEach(element=> {
+        faireCercle(element[0],element[1],element[2]);
+    })
+}
+
+tab.push([-3,-3,"green"],[-3,-2,"red"],[-3,-1,"orange"]);
+toutDessiner(tab);
+//console.log("anc coords " + tab);
+
 
 </script>
+
+
+<button onclick="tourneG()">Tourner G</button>
+<button onclick="tourneD()">Tourner D</button>