image-draw-search/main.js

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