From 47c90f8eec284511087041ad28828283efb90592 Mon Sep 17 00:00:00 2001 From: Yann C Date: Wed, 7 Feb 2024 16:52:55 +0200 Subject: draw --- index.html | 1 + index.js | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 index.js diff --git a/index.html b/index.html index 90c6f7c..44968c8 100644 --- a/index.html +++ b/index.html @@ -6,5 +6,6 @@

MQTT Bonjour Yann

+ \ 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 -- cgit v1.2.3