CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
ctulu
ctulu

Reputation: 444

Mouse position on canvas painting

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

Upvotes: 9

Views: 1584

Answers (2)

cHao
cHao

Reputation: 86506

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.

Upvotes: 3

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

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>

Upvotes: 5

Related Questions