fix mouse pointer location

README.md

@@ -3,3 +3,6 @@
 
 Simple repo for keeping track of attempts to work with various web
 technologies.
+
+
+## TODOS

drawing-program/index.html

@@ -86,9 +86,18 @@
 	  const drawingElem = document.getElementById('drawing')
 	  const colorElem = document.getElementById('color')
 
+	  
+	  function mousePosition(e) {
+	      const canvasBounds = canvas.getBoundingClientRect()
+	      const canvasSize = [canvas.width, canvas.height]
+	      const x = e.pageX - canvasBounds.left - scrollX
+	      const y = e.pageY - canvasBounds.top - scrollY
+	      return [x/canvasBounds.width*canvasSize[0], y/canvasBounds.height*canvasSize[1]]
+	  }
+	  
 	  canvas.addEventListener('mousedown', e => {
 	      drawing = true;
-	      lastPosition = [e.clientX, e.clientY]
+	      lastPosition = mousePosition(e)
 	      updateDebug()
 	  })
 	  canvas.addEventListener('mouseup', e => {
@@ -104,20 +113,21 @@
 	      if (!drawing) {
 		  lastPosition = undefined
 	      } else {
-		  lastPosition = [e.clientX, e.clientY]
+		  lastPosition = mousePosition(e)
 	      }
 	  })
 	  
 	  canvas.addEventListener('mousemove', e => {
 	      if (drawing) {
+		  const newPosition = mousePosition(e)
 		  if (lastPosition !== undefined) {
-		      console.log(`lineTo: (${e.clientX}, ${e.clientY})`)
+		      console.log(`lineTo: (${newPosition[0]}, ${newPosition[1]})`)
 		      context.beginPath()
 		      context.moveTo(lastPosition[0], lastPosition[1])
-		      context.lineTo(e.clientX, e.clientY)
+		      context.lineTo(newPosition[0], newPosition[1])
 		      context.stroke()
 		  }
-		  lastPosition = [e.clientX, e.clientY]
+		  lastPosition = newPosition
 	      }
 	  })