Offset When Drawing On Canvas

Have a simple drawing application. The problem is in the coordinates (redraw function): they must be mouse, but are near 2x mouse. What's the problem in the code? <

Solution 1:

You should not set a canvas' width/height through CSS. It makes the canvas stretch instead of making the resolution higher. This means that although the coordinates are correct, they will visually end up somewhere else.

For example, an x coordinate of 100 will be stretched to visually be an x coordinate of 200 (or something else; at least it will be bigger than 100 since it's been stretched).

Instead, use:

<canvas id="canvas" width="700" height="420" />

and remove the width: 100% in CSS.

http://jsfiddle.net/euXJC/1/