CODEWITHSUNDEEP
javascripthtmlcanvas
kartikq
kartikq

Reputation: 651

Mouse position within HTML 5 Canvas

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.

Upvotes: 4

Views: 8642

Answers (3)

canvastag
canvastag

Reputation: 508

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

Upvotes: 3

gor
gor

Reputation: 11658

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/.

Upvotes: 2

Juho Veps&#228;l&#228;inen
Juho Veps&#228;l&#228;inen

Reputation: 26873

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.

Upvotes: 5

Related Questions