diff options
| author | Yann C <yann.clarisse@epita.fr> | 2024-02-07 16:52:55 +0200 |
|---|---|---|
| committer | Yann C <yann.clarisse@epita.fr> | 2024-02-07 16:52:55 +0200 |
| commit | 47c90f8eec284511087041ad28828283efb90592 (patch) | |
| tree | 81d72965225aae8c43d9a6c2b38314ca3741f07a | |
| parent | 96833adad63574bbdaecb4283870d3b9aa92d8f3 (diff) | |
draw
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | index.js | 40 |
2 files changed, 41 insertions, 0 deletions
@@ -6,5 +6,6 @@ <body> <h1>MQTT Bonjour Yann</h1> <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 new file mode 100644 index 0000000..43dc537 --- /dev/null +++ b/index.js @@ -0,0 +1,40 @@ +const canvas = document.getElementById('drawing-board'); +const ctx = canvas.getContext('2d'); + +const canvasOffsetX = canvas.offsetLeft; +const canvasOffsetY = canvas.offsetTop; + +canvas.width = window.innerWidth - canvasOffsetX; +canvas.height = window.innerHeight - canvasOffsetY; + +let isPainting = false; +let lineWidth = 5; +let startX; +let StartY; +ctx.strokeStyle = "blue"; + +const draw = (e) => { + if (!isPainting) { + return; + } + + ctx.lineWidth = lineWidth; + ctx.lineCap = 'round'; + + ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY); + ctx.stroke(); + +} +canvas.addEventListener('mousedown', (e) => { + isPainting = true; + startX = e.clientX; + StartY = e.clientY; +}); + +canvas.addEventListener('mouseup', (e) => { + isPainting = false; + ctx.stroke(); + ctx.beginPath(); +}); + +canvas.addEventListener('mousemove', draw);
\ No newline at end of file |