Mouse position within HTML 5 Canvas

Question

I am writing a simple drawing app to get an understanding of the HTML 5 canvas. The problem is that I simply can't seem to get the correct mouse position within the canvas element.I've looked at the other questions on stackoverflow like the one here getting mouse position with javascript within canvas that address this issue but their solutions don't seem to help me.

Here is my code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <style type="text/css">
            #test {
                border: solid black 1px;
                width: 500px;
                height: 500px;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var canvas=document.getElementById('test');
                if(canvas.getContext){
                    var ctx =canvas.getContext('2d');       
                    var draw = false;
                    ctx.strokeStyle = "rgb(200,0,0)";
                    ctx.lineWidth = 3;
                    ctx.lineCap = "round"; 

                    $('#test').mousedown(function(){draw=true;});
                    $('#test').mouseup(function(){draw=false;});
                    $('#test').mousemove(function(e){
                        if(draw){
                            var x , y;
                            x = e.layerX;
                            y = e.layerY;
                            ctx.moveTo(x,y);
                            ctx.lineTo(x+1,y+1);
                            ctx.stroke();
                                             }
                                    });
                }
            });
        </script>
    </head>
    <body>
        <canvas id="test"></canvas>
    </body>
</html>

What am I doing wrong here? I have tested this in both Chrome/Firefox.

score 5 · Accepted Answer · answered Feb 06 '11 at 18:58

5

Your canvas is missing width and height properties. In the current solution it just scales the default to fit your CSS. This in turn breaks your mouse coords. Try something along

<canvas id="test" width=500 height=500></canvas>

as your canvas markup.

answered Feb 06 '11 at 18:58

Juho Vepsäläinen

26,573
12
79
105

Thanks bebraw that worked! It seems that the CSS width and height do not define the coordinate system of the canvas. I should've read the specs more carefully. – kartikq Feb 06 '11 at 19:19

score 3 · Answer 2 · edited Feb 23 '11 at 13:57

Suppose your canvas has already been declared...

var Mouse = { //make a globally available object with x,y attributes 
    x: 0,
    y: 0
}
canvas.onmousemove = function (event) { // this  object refers to canvas object  
    Mouse = {
        x: event.pageX - this.offsetLeft,
        y: event.pageY - this.offsetTop
    }
}

Mouse will update when you mouse move on the canvas

score 2 · Answer 3 · answered Feb 06 '11 at 19:15

2

You should add pixel dimenstion to your canvas element:

<canvas id="test" width='500px' height='500px' ></canvas>

Here is working example - http://jsfiddle.net/gorsky/GhyPr/.

answered Feb 06 '11 at 19:15

gor

11,498
5
36
42

Thanks gor! I made a mistake of assuming that the css width/height also defines the coordinate system for the canvas element. – kartikq Feb 06 '11 at 19:28

Mouse position within HTML 5 Canvas

3 Answers3

Linked