Mouse position on canvas painting
canvas, html, javascript, jquery
Solution
You're setting your canvas width and height in CSS. That just stretches the canvas the same as it would an image.
The effect is drawing in the wrong place.
Instead you need to set your canvas dimensions on the tag itself:
<canvas width="400" height="400"></canvas>
Problem
The code below paints correctly but it paints to wrong coordinates. It should paint the place where the mouse is. I was not able to discover my mistake. Thanks. JSFIDDLE ``` container.mousedown(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; context_temp.beginPath(); context_temp.moveTo(x, y); started = true; }); container.mousemove(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; if (started) { context_temp.lineTo(x, y); context_temp.stroke(); } }); container.mouseup(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; if (started) { container.mousemove(x, y); started = false; update(); } }); ```