commit 184431549000cef0c2351148f468a87efc4834cd Author: jdreichmann Date: Mon Jun 10 14:30:19 2019 +0200 Add very basic mouse tracking via events, needs improvements as events are not reliable diff --git a/index.html b/index.html new file mode 100644 index 0000000..2de811f --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..6fad064 --- /dev/null +++ b/main.css @@ -0,0 +1,15 @@ +html, body { + width: 100%; + height: 100vh; + background-color: #333; +} + +#drawImage { + position: absolute; + width: 900px; + height: 450px; + margin: 0 auto; + top: 25%; + left: 25%; + background-color: white; +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..0c1ce9d --- /dev/null +++ b/main.js @@ -0,0 +1,35 @@ +window.onload = () => { + + + console.log('loaded') + + const drawArea = document.querySelector('#drawImage') + const colorPicker = document.querySelector('#drawColor') + + let drawRoutine + let drawing = false + let x, y + + const drawAreaBounding = drawArea.getBoundingClientRect() + const xOffset = drawAreaBounding.x + const yOffset = drawAreaBounding.y + drawArea.width = drawAreaBounding.width + drawArea.height = drawAreaBounding.height + const drawCtx = drawArea.getContext('2d') + + console.log(drawArea) + drawArea.addEventListener('mousedown', () => {drawing = true}) + drawArea.addEventListener('mousemove', event => { + if (drawing) { + x = event.clientX - xOffset + y = event.clientY - yOffset + console.log(x, y, drawArea.width, drawArea.height) + drawCtx.beginPath() + drawCtx.arc(x, y, 5, 0, Math.PI * 2) + drawCtx.fill() + } + }) + + document.addEventListener('mouseup', () => {drawing = false}) +} +