48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
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})
|
|
|
|
const fileInput = document.querySelector("#fileInput")
|
|
fileInput.addEventListener("change", () => {
|
|
const file = fileInput.files[0]
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
const img = new Image(drawAreaBounding.width, drawAreaBounding.height)
|
|
img.onload = () => drawCtx.drawImage(img, 0, 0)
|
|
img.src = reader.result
|
|
}
|
|
setTimeout(() => reader.readAsDataURL(file), 0)
|
|
})
|
|
}
|
|
|