36 lines
902 B
JavaScript
36 lines
902 B
JavaScript
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})
|
|
}
|
|
|