On windows touch screen, pageX, pageY don't map to coordinates on 100% canvas.

Question

You can follow along with this jsfiddle if you feel so inclined. I have a 100% width and height canvas and a range slider for size set to one. So I'm using fillRect(touch.pageX, touch.pageY, 1, 1); But when I use my finger to draw on the canvas, the output is scaled out relative to the input. What do I have to do to get the position of the element on the page

I simply pass the pageX and pageY coordinates to the fillRect function, but somehow the context grid looks like it's bigger than the touch coordinate space.

context.fillRect(touches[i].pageX, touches[i].pageY, size, size);

Answer 1

I found the solution later that evening. http://www.ckollars.org/canvas-two-coordinate-scales.html lists the conversion factors for the screen and canvas coordinates.