diff --git a/code/index.css b/code/index.css
new file mode 100644
index 0000000..02ba8bb
--- /dev/null
+++ b/code/index.css
@@ -0,0 +1,71 @@
+
+.all-container {
+    display : flex; /*
+    align-items: baseline;
+    width : min-content;
+    flex-direction: row;
+    flex-wrap: wrap;*/
+
+}
+
+.flex-container {
+    /* We first create a flex layout context */
+    display : flex;
+    align-items: baseline;
+    width : min-content;
+    /* Then we define the flow direction 
+       and if we allow the items to wrap 
+     * Remember this is the same as:
+     * flex-direction: row;
+     * flex-wrap: wrap;
+     */
+    
+    
+    /* Then we define how is distributed the remaining space */
+
+    flex-direction: column;
+  }
+  /*
+  
+  .flex-item {
+    padding: 5px;
+    width: 200px;
+    height: 150px;
+    margin-top: 10px;
+    line-height: 150px;
+    color: white;
+    font-weight: bold;
+    font-size: 3em;
+    text-align: center;
+  }*/
+
+  .vitraux {
+    /* We first create a flex layout context */
+    display : flex;
+    align-items: baseline;
+    width : min-content;
+    /* Then we define the flow direction 
+       and if we allow the items to wrap 
+     * Remember this is the same as:
+     * flex-direction: row;
+     * flex-wrap: wrap;
+     */
+    
+    
+    /* Then we define how is distributed the remaining space */
+
+    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;
+  }*/
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 06cbec9..52ef980 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,368 +1,445 @@
+<!DOCTYPE html>
+<html>
 
-<canvas id="canvas1" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas2" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas3" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas4" style="border:1px solid #000"></canvas>
-
-<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
-
-<canvas id="canvasObj" style="border:1px solid green"></canvas>
-<button onclick="generateEasy()">gen easy</button>
-
-<script>
-    var canvas1 = document.getElementById('canvas1');
-    var ctx1 = canvas1.getContext('2d');
-    
-    var canvas2 = document.getElementById('canvas2');
-    var ctx2 = canvas2.getContext('2d');
-    
-    var canvas3 = document.getElementById('canvas3');
-    var ctx3 = canvas3.getContext('2d');
-    
-    var canvas4 = document.getElementById('canvas4');
-    var ctx4 = canvas4.getContext('2d');
-    
-    var canvasT = document.getElementById('canvasTotal');
-    var ctxT = canvasT.getContext('2d');
-    
-    var canvasO = document.getElementById('canvasObj');
-    var ctxO = canvasO.getContext('2d');
-    
-    tab1=[];
-    tab2=[];
-    tab3=[];
-    tab4=[];
-    tabTotal=[];
-    tabObjCmp=[];
-    mousePos=[];
-    colors=["red","blue","green","brown"];
-    
-    width=300; // 6 lignes de 50px
-    height=300; // 6 colonnes de 50px
-    canvas1.width=width;
-    canvas2.width=width;
-    canvas3.width=width;
-    canvas4.width=width;
-    canvasT.width=width;
-    canvasO.width=width;
-    
-    canvas1.height=height;
-    canvas2.height=height;
-    canvas3.height=height;
-    canvas4.height=height;
-    canvasT.height=height;
-    canvasO.height=height;
-    
-    function faireCercle(x,y,color,lectx){
-        var cercle = new Path2D();
-        
-        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);
-        
-        lectx.fillStyle = color;
-        lectx.fill(cercle);
-    }
-    
-    function tourneG(letab,lecanvas,lectx)
-    {
-        letab.forEach(element => {
-            tmp=element[0];
-            element[0]=element[1];
-            element[1]=-tmp;
-        });
-        toutDessiner(letab,lecanvas,lectx);
-        empiler();
-    }
-    
-    function tourneD(letab,lecanvas,lectx,sselem=null)
-    {
-        if(sselem==null){
+<head>
+    <title>On The Dot</title>
+    <link rel="stylesheet" type="text/css" href="index.css"/>
+</head>
+<body>
+    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
+        <ul id="vitraux" class="vitraux" style="border:2px solid purple">
+            <canvas id="canvas1" class="vitrail" style="border:1px solid #000"></canvas>
+            
+            <canvas id="canvas2" class="vitrail" style="border:1px solid #000"></canvas>
+            
+            <canvas id="canvas3" class="vitrail" style="border:1px solid #000"></canvas>
+            
+            <canvas id="canvas4" class="vitrail" style="border:1px solid #000"></canvas>
+        </ul>
+        
+        <canvas id="canvasTotal" style="border:1px solid #000"></canvas>
+        <h1>Objectif</h1>
+        <canvas id="canvasObj" style="border:1px solid green"></canvas>
+        <button onclick="generateEasy()">gen easy</button>
+        
+        <ul id="canvasR" class="flex-container" style="border:1px solid violet">
+            <canvas id="canvasR1" class="flex-item" width="150" height="150" style="border:1px solid red"></canvas>
+            <canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
+            <canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
+            <canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
+        </ul>
+    </ul>
+    <script>
+        var canvas1 = document.getElementById('canvas1');
+        var ctx1 = canvas1.getContext('2d');
+        
+        var canvas2 = document.getElementById('canvas2');
+        var ctx2 = canvas2.getContext('2d');
+        
+        var canvas3 = document.getElementById('canvas3');
+        var ctx3 = canvas3.getContext('2d');
+        
+        var canvas4 = document.getElementById('canvas4');
+        var ctx4 = canvas4.getContext('2d');
+        
+        var canvasT = document.getElementById('canvasTotal');
+        var ctxT = canvasT.getContext('2d');
+        
+        var canvasO = document.getElementById('canvasObj');
+        var ctxO = canvasO.getContext('2d');
+        
+        var canvasR = document.getElementById('canvasR');
+        //var ctxR = canvasR.getContext('2d');
+        
+        tab1=[];
+        tab2=[];
+        tab3=[];
+        tab4=[];
+        tabR=[];
+        tabTotal=[];
+        tabObjCmp=[];
+        mousePos=[];
+        colors=["red","blue","green","brown"];
+        
+        width=240; // 6 lignes de 50px
+        height=240; // 6 colonnes de 50px
+        canvas1.width=width;
+        canvas2.width=width;
+        canvas3.width=width;
+        canvas4.width=width;
+        canvasT.width=width;
+        canvasO.width=width;
+        
+        canvas1.height=height;
+        canvas2.height=height;
+        canvas3.height=height;
+        canvas4.height=height;
+        canvasT.height=height;
+        canvasO.height=height;
+        
+        function faireCercle(x,y,color,lectx){
+            var cercle = new Path2D();
+            
+            
+            
+            nx=(width/6)*(x>0 ? x+2 : x+3);
+            ny=(height/6)*(y>0 ? y+2 : y+3);
+            
+            cercle.moveTo(nx, ny);
+            cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
+            
+            lectx.fillStyle = color;
+            lectx.fill(cercle);
+        }
+        
+        function tourneG(letab,lecanvas,lectx)
+        {
             letab.forEach(element => {
-                tmp=element[1];
-                element[1]=element[0];
-                element[0]=-tmp;
+                tmp=element[0];
+                element[0]=element[1];
+                element[1]=-tmp;
             });
+            toutDessiner(letab,lecanvas,lectx);
+            empiler();
         }
-        else {
-            letab[sselem].forEach(element => {
-                tmp=element[1];
-                element[1]=element[0];
-                element[0]=-tmp;
-            });
+        
+        function tourneD(letab,lecanvas,lectx,sselem=null)
+        {
+            if(sselem==null){
+                letab.forEach(element => {
+                    tmp=element[1];
+                    element[1]=element[0];
+                    element[0]=-tmp;
+                });
+            }
+            else {
+                letab[sselem].forEach(element => {
+                    tmp=element[1];
+                    element[1]=element[0];
+                    element[0]=-tmp;
+                });
+            }
+            toutDessiner(letab,lecanvas,lectx);
+            if(sselem==null)
+            empiler();
         }
-        toutDessiner(letab,lecanvas,lectx);
-        if(sselem==null)
-        empiler();
-    }
-    
-    function toutDessiner(pts,lecanvas,lectx)
-    {
-        lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
-        pts.forEach(element=> {
-            if(Array.isArray(element[0])){
-                element.forEach(element2 => {
-                    faireCercle(element2[0],element2[1],element2[2],lectx);
-                })
+        
+        function toutDessiner(pts,lecanvas,lectx)
+        {
+            lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
+            if(pts[0])
+            {
+                for(i=1;i<pts.length;i++)
+                {
+                    if(Array.isArray(pts[i]))
+                    {
+                        /*
+                        pts[i].forEach(element => {
+                            faireCercle(element[0],element[1],element[2],lectx);
+                        })*/
+                        faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                    }
+                    else
+                    faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                }
             }
-            else
-            faireCercle(element[0],element[1],element[2],lectx);
-        })
-    }
-    
-    function empiler(obj=false)
-    {
-        const unique = (val) => val.toString() != test.toString();
-        exists=false;
-        
-        if(!obj)
+            /*
+            pts.forEach(element=> {
+                if(Array.isArray(element[0])){
+                    element.forEach(element2 => {
+                        faireCercle(element2[0],element2[1],element2[2],lectx);
+                    })
+                }
+                else
+                faireCercle(element[0],element[1],element[2],lectx);
+            })*/
+        }
+        
+        function empiler(obj=false)
         {
-            tabTotal=[];
-            tab1.forEach(element => {
-                tabTotal.push(element);
-            })
-            tab2.forEach(element => {
-                colors.forEach(col => {
-                    test=[element[0],element[1],col];
-                    if(!exists)
-                    exists=!tabTotal.every(unique);
-                })
-                if(!exists)
-                tabTotal.push(element);
-                exists=false;
-            })
-            tab3.forEach(element => {
-                colors.forEach(col => {
-                    test=[element[0],element[1],col];
-                    if(!exists)
-                    exists=!tabTotal.every(unique);
+            const unique = (val) => val.toString() != test.toString();
+            exists=false;
+            
+            if(!obj)
+            {
+                tabTotal=[];
+                if(tab1[0])
+                {
+                    
+                    tab1.forEach(element => {
+                        tabTotal.push(element);
+                    })
+                }
+                if(tab2[0]){
+                    
+                    tab2.forEach(element => {
+                        colors.forEach(col => {
+                            test=[element[0],element[1],col];
+                            if(!exists)
+                            exists=!tabTotal.every(unique);
+                        })
+                        if(!exists)
+                        tabTotal.push(element);
+                        exists=false;
+                    })
+                }
+                if(tab3[0])
+                {
+                    
+                    tab3.forEach(element => {
+                        colors.forEach(col => {
+                            test=[element[0],element[1],col];
+                            if(!exists)
+                            exists=!tabTotal.every(unique);
+                        })
+                        if(!exists)
+                        tabTotal.push(element);
+                        exists=false;
+                    })
+                }
+                if(tab4[0]){
+                    
+                    tab4.forEach(element => {
+                        colors.forEach(col => {
+                            test=[element[0],element[1],col];
+                            if(!exists)
+                            exists=!tabTotal.every(unique);
+                        })
+                        if(!exists)
+                        tabTotal.push(element);
+                        exists=false;
+                    })
+                }
+                checkAllOK();
+                toutDessiner(tabTotal,canvasT,ctxT);
+            }
+            else{
+                tabObj[0].forEach(element => {
+                    tabObjCmp.push(element);
                 })
-                if(!exists)
-                tabTotal.push(element);
-                exists=false;
-            })
-            tab4.forEach(element => {
-                colors.forEach(col => {
-                    test=[element[0],element[1],col];
+                
+                tabObj[1].forEach(element => {
+                    colors.forEach(col => {
+                        test=[element[0],element[1],col];
+                        if(!exists)
+                        exists=!tabObjCmp.every(unique);
+                    })
                     if(!exists)
-                    exists=!tabTotal.every(unique);
+                    tabObjCmp.push(element);
+                    exists=false;
                 })
-                if(!exists)
-                tabTotal.push(element);
-                exists=false;
-            })
-            checkAllOK();
-            toutDessiner(tabTotal,canvasT,ctxT);
+            }
         }
-        else{
-            tabObj[0].forEach(element => {
-                tabObjCmp.push(element);
-            })
-            
-            tabObj[1].forEach(element => {
-                colors.forEach(col => {
-                    test=[element[0],element[1],col];
-                    if(!exists)
-                    exists=!tabObjCmp.every(unique);
+        
+        function swap(letab, lecanvas, lectx,ladir){
+            if(ladir=="H"){
+                letab.forEach(element=> {
+                    element[1]=-element[1];
                 })
-                if(!exists)
-                tabObjCmp.push(element);
-                exists=false;
-            })
-        }
-    }
-    
-    function swap(letab, lecanvas, lectx,ladir){
-        if(ladir=="H"){
-            letab.forEach(element=> {
-                element[1]=-element[1];
-            })
-        }
-        else {
-            letab.forEach(element=> {
-                element[0]=-element[0];
-            })
+            }
+            else {
+                letab.forEach(element=> {
+                    element[0]=-element[0];
+                })
+            }
+            
+            toutDessiner(letab,lecanvas,lectx);
+            empiler();
         }
         
-        toutDessiner(letab,lecanvas,lectx);
-        empiler();
-    }
-    
-    function getRandomInt(max) {
-        return Math.floor(Math.random() * Math.floor(max))+1;
-    }
-    
-    function generateEasy(){
-        tabObj=[[],[]];
-        tabObj[0]=Array.from(tab1);
-        tabObj[1]=Array.from(tab2);
-        tabObjCmp=[];
-        actions=getRandomInt(5);
+        function getRandomInt(max) {
+            return Math.floor(Math.random() * Math.floor(max))+1;
+        }
         
-        while(actions>0){
-            tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
-            actions--;
+        function generateEasy(){
+            tabObj=[[],[]];
+            tabObj[0]=Array.from(tab1);
+            tabObj[1]=Array.from(tab2);
+            tabObjCmp=[];
+            actions=getRandomInt(8);
+            
+            while(actions>0){
+                tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
+                actions--;
+            }
+            empiler(true);
+            toutDessiner(tabObj,canvasO,ctxO);
+            
         }
-        empiler(true);
-        toutDessiner(tabObj,canvasO,ctxO);
-        
-    }
-    
-    function getMousePosition(lecanvas, event, lectx, letab) { 
-        let rect = lecanvas.getBoundingClientRect(); 
-        let x = event.clientX - rect.left; 
-        let y = event.clientY - rect.top; 
-        let dir = compas(x,y,lecanvas);
-        
-        if(x<lecanvas.width/2)
-        tourneG(letab,lecanvas,lectx);
-        else
-        tourneD(letab,lecanvas,lectx);
-    } 
-    
-    /// renvoie le point cardianl où se trouve le point
-    
-    function compas(x,y,lecanvas)
-    {
-        rect = lecanvas.getBoundingClientRect(); 
-        x = event.clientX - rect.left; 
-        y = event.clientY - rect.top; 
-        ne = x>y;
-        se = x>lecanvas.height-y;
-        
-        if(ne && se ) return "E";
-        if(ne && !se ) return "N";
-        if(!ne && se ) return "S";
-        if(!ne && !se ) return "O";
-    }
-    
-    function rotationManager(e)
-    {
-        canvasNumber=e.currentTarget.id.substring(6);
-        lecanvas=eval("canvas"+canvasNumber);
-        letab=eval("tab"+canvasNumber);
-        lectx=lecanvas.getContext('2d');
-        dir = compas(e.clientX,e.clientY,e.currentTarget);
-        if(mousePos[0]==canvasNumber)
-        {
-        if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
-        {
+        
+        function getMousePosition(lecanvas, event, lectx, letab) { 
+            let rect = lecanvas.getBoundingClientRect(); 
+            let x = event.clientX - rect.left; 
+            let y = event.clientY - rect.top; 
+            let dir = compas(x,y,lecanvas);
+            
+            if(x<lecanvas.width/2)
             tourneG(letab,lecanvas,lectx);
-        }
-        else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
-        {
+            else
             tourneD(letab,lecanvas,lectx);
-        }
-        else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
-        {
-            swap(letab,lecanvas,lectx,"V");
-        }
-        else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
-        {
-            swap(letab,lecanvas,lectx,"H");
-        }
-        }
-        else
+        } 
+        
+        /// renvoie le point cardianl où se trouve le point
+        
+        function compas(x,y,lecanvas)
         {
-            changeOrder(mousePos[0],canvasNumber);
+            rect = lecanvas.getBoundingClientRect(); 
+            x = event.clientX - rect.left; 
+            y = event.clientY - rect.top; 
+            ne = x>y;
+            se = x>lecanvas.height-y;
+            
+            if(ne && se ) return "E";
+            if(ne && !se ) return "N";
+            if(!ne && se ) return "S";
+            if(!ne && !se ) return "O";
         }
-    }
-    
-    
-    function checkAllOK(){
-        //const condition = (val) => val.toString() == element.toString();
-        exists=true;
-        //exists=!tabObjCmp.every(unique);
-        
-        if(tabTotal.length==tabObjCmp.length)
+        
+        function rotationManager(e)
         {
-            for(i=0;i>tabTotal.length;i++)
+            canvasNumber=e.currentTarget.id.substring(6);
+            if(canvasNumber=="R")
+            {
+                toggleVisible(mousePos[0]);
+            }
+            else
             {
-                exists*tabTotal[i].toString()==tabObjCmp[i].toString();
+                lecanvas=eval("canvas"+canvasNumber);
+                letab=eval("tab"+canvasNumber);
+                lectx=lecanvas.getContext('2d');
+                dir = compas(e.clientX,e.clientY,e.currentTarget);
+                if(mousePos[0]==canvasNumber)
+                {
+                    if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
+                    {
+                        tourneG(letab,lecanvas,lectx);
+                    }
+                    else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
+                    {
+                        tourneD(letab,lecanvas,lectx);
+                    }
+                    else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
+                    {
+                        swap(letab,lecanvas,lectx,"V");
+                    }
+                    else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
+                    {
+                        swap(letab,lecanvas,lectx,"H");
+                    }
+                }
+                else
+                {
+                    changeOrder(mousePos[0],canvasNumber);
+                }
             }
         }
-        else
+        
+        
+        function checkAllOK(){
+            //const condition = (val) => val.toString() == element.toString();
+            exists=true;
+            //exists=!tabObjCmp.every(unique);
+            
+            if(tabTotal.length==tabObjCmp.length)
+            {
+                for(i=0;i>tabTotal.length;i++)
+                {
+                    exists*tabTotal[i].toString()==tabObjCmp[i].toString();
+                }
+            }
+            else
             exists=false;
+            
+            if(exists)
+            {
+                console.log("OK");
+                generateEasy();
+            }
+        }
         
-        if(exists)
+        function changeOrder(from, to)
         {
-            console.log("OK");
-            generateEasy();
+            fromTab=eval("tab"+from);
+            toTab=eval("tab"+to);
+            for(i=0;i<toTab.length;i++)
+            {
+                
+                [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
+            }
+            //[fromTab,toTab]=[toTab,fromTab];
+            toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
+            toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
+            
+            
         }
-    }
-
-    function changeOrder(from, to)
-    {
-        fromTab=eval("tab"+from);
-        toTab=eval("tab"+to);
-        for(i=0;i<toTab.length;i++)
+        
+        function toggleVisible(where)
         {
-            
-        [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
+            eval("tab"+where+"[0]=!tab"+where+"[0];");
+            empiler();
+            toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+            toutDessiner(tabTotal,canvasT,ctxT);
         }
-        //[fromTab,toTab]=[toTab,fromTab];
-        toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
-        toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
-
-
-    }
-    
-    
-    canvas1.addEventListener("mousedown",function(e){
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    })
-    
-    canvas1.addEventListener("mouseup",function(e){
-        rotationManager(e);
-    })
-    
-    canvas2.addEventListener("mousedown",function(e){
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    })
-    
-    canvas2.addEventListener("mouseup",function(e){
-        rotationManager(e);
-    })
-    
-    canvas3.addEventListener("mousedown",function(e){
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    })
-    
-    canvas3.addEventListener("mouseup",function(e){
-        rotationManager(e);
-    })
-    
-    canvas4.addEventListener("mousedown",function(e){
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    })
-    
-    canvas4.addEventListener("mouseup",function(e){
-        rotationManager(e);
-    })
-    
-    /*
-    tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-    tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-    tab3.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-    tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-    */
-
-    tab1.push([-1,-1,"green"],[-2,-2,"red"]);
-    tab2.push([-1,-1,"green"],[-2,-2,"red"]);
-    tab3.push([-1,-1,"green"],[-2,-2,"red"]);
-    tab4.push([-1,-1,"green"],[-2,-2,"red"]);
+        
+        
+        canvas1.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        })
+        
+        canvas1.addEventListener("mouseup",function(e){
+            rotationManager(e);
+        })
+        
+        canvas2.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        })
+        
+        canvas2.addEventListener("mouseup",function(e){
+            rotationManager(e);
+        })
+        
+        canvas3.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        })
+        
+        canvas3.addEventListener("mouseup",function(e){
+            rotationManager(e);
+        })
+        
+        canvas4.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        })
+        
+        canvas4.addEventListener("mouseup",function(e){
+            rotationManager(e);
+        })
+        
+        canvasR.addEventListener("mouseup",function(e){
+            rotationManager(e);
+        })
+        
+        
+        /*
+        tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
+        tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
+        tab3.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
+        tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
+        */
+        
+        tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+        tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+        tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+        tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+        
+        
+        toutDessiner(tab1,canvas1,ctx1);
+        toutDessiner(tab2,canvas2,ctx2);
+        toutDessiner(tab3,canvas3,ctx3);
+        toutDessiner(tab4,canvas4,ctx4);
+        
+        
+        
+    </script>
+</body>
 
-    
-    toutDessiner(tab1,canvas1,ctx1);
-    toutDessiner(tab2,canvas2,ctx2);
-    toutDessiner(tab3,canvas3,ctx3);
-    toutDessiner(tab4,canvas4,ctx4);
-    
-    
-    
-</script>
+</html>
