Mouse position on canvas painting

Question

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

score 5 · Accepted Answer · answered Jan 02 '14 at 22:14

5

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>

answered Jan 02 '14 at 22:14

Patrick Gunderson

3,263
17
28

2

Thank you. I wasted my hours for nothing :D. But why it has to be that way? – ctulu Jan 02 '14 at 22:20
Just think of canvas as an element that you can draw into, then it makes more sense. – Patrick Gunderson Jan 02 '14 at 22:20
Note that you could also set the width / height with JavaScript, like so: canvas.width = '400'; canvas.height = '300'; – ryanbrill Jan 02 '14 at 22:28
1

@ryanbrill: Yep. But the height and width properties are numbers, so it'd be better without the quotes. (It'll work either way, but just looks cleaner.) – cHao Jan 02 '14 at 22:30
@ryanbrill in the corrected fiddle, I did that for his 'temp_canvas' :) – Patrick Gunderson Jan 02 '14 at 23:24

cHao · Answer 2 · 2014-01-03T04:08:22.093

A <canvas> has its own width and height, which not only define its physical size (unless CSS steps in), but also its logical size (the number of rows/columns of pixels on its drawing surface). When CSS changes the size, the canvas stretches to fit, but doesn't change its logical size. Basically, the pixels stretch too, so the logical and physical coordinates no longer match up.

To fix the problem, you could either do the math to match the coordinates back up, or exclusively use the canvases' own width/height to size them, or set the canvases' width and height properties after the fact to match the width and height set by CSS.

Mouse position on canvas painting

2 Answers2

Linked