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