jdreichmann/image-draw-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add very basic mouse tracking via events, needs improvements as events are not reliable

Browse Source
This commit is contained in:
Johanna Dorothea Reichmann 2019-06-10 14:30:19 +02:00
commit 1844315490
Signed by untrusted user who does not match committer: transcaffeine
GPG Key ID: 03624C433676E465
3 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="drawImage"></canvas>
<label> Color: <input type="color" id="drawColor" /></label>
</body>
</html>

15
main.css Normal file
View File

@ -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;
}

35
main.js Normal file
View File

@ -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})
}