4 files changed, 22 insertions, 9 deletions
diff --git a/index.html b/index.html
index 44968c8..d2fa69c 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,16 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>MQTT</title>
+        <title>IoT Project</title>
+        <link rel="stylesheet" type="text/css" href="style.css" />
     </head>
     <body>
-        <h1>MQTT Bonjour Yann</h1>
+        
+        <p style="position: absolute; left: 20px; border: 3px dashed orange; padding: 4px">
+            Click anywhere on the screen to move the robot!
+        </p>
         <canvas id="drawing-board"></canvas>
+
         <script src="./index.js"></script>
     </body>
 </html>
 \ No newline at end of file
diff --git a/index.js b/index.js
index 43dc537..3ef5dd2 100644
--- a/index.js
+++ b/index.js
@@ -4,16 +4,17 @@ const ctx = canvas.getContext('2d');
 const canvasOffsetX = canvas.offsetLeft;
 const canvasOffsetY = canvas.offsetTop;
 
-canvas.width = window.innerWidth - canvasOffsetX;
-canvas.height = window.innerHeight - canvasOffsetY;
+canvas.width = window.innerWidth - canvasOffsetX * 2;
+canvas.height = window.innerHeight - canvasOffsetY * 2;
 
 let isPainting = false;
 let lineWidth = 5;
 let startX;
-let StartY;
-ctx.strokeStyle = "blue";
+let startY;
+ctx.strokeStyle = "skyblue";
 
 const draw = (e) => {
+    console.log(e);
     if (!isPainting) {
         return;
     }
@@ -21,14 +22,12 @@ const draw = (e) => {
     ctx.lineWidth = lineWidth;
     ctx.lineCap = 'round';
 
-    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
+    ctx.lineTo(e.pageX - canvasOffsetX, e.pageY - canvasOffsetY);
     ctx.stroke();
 
 }
 canvas.addEventListener('mousedown', (e) => {
     isPainting = true;
-    startX = e.clientX;
-    StartY = e.clientY;
 });
 
 canvas.addEventListener('mouseup', (e) => {
diff --git a/principe.md b/principle.md
index 10bc915..10bc915 100644
--- a/principe.md
+++ b/principle.md
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f10a42e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+body {
+    background: linear-gradient(60deg, skyblue, 70%, blue) no-repeat fixed;
+    background-size: cover;
+}
+
+canvas {
+    background-color: aliceblue;
+    border-radius: 20px;
+}
+\ No newline at end of file