diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-02-07 21:16:54 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-02-07 21:16:54 +0200 |
| commit | d1aca3c6fc2945b568e87e86b6025c78dbf65bd3 (patch) | |
| tree | 43bbbcc64d6f6c4a8c0e0799ccfe401747e64621 | |
| parent | 47c90f8eec284511087041ad28828283efb90592 (diff) | |
feat: fixed the canvas backend, and updated the frontend
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | index.js | 13 | ||||
| -rw-r--r-- | principle.md (renamed from principe.md) | 0 | ||||
| -rw-r--r-- | style.css | 9 |
4 files changed, 22 insertions, 9 deletions
@@ -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 @@ -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 |