Getting correct mouse position on Canvas when canvas size is relative?

Question

The problem is the following, my canvas width and height is relative to its parents. In css, its width and height is set to 95%. That causes my getMousePosition function to not work properly, meaning that when I click on a canvas point, the actual point where say a rectangle is drawn is far from the observed clicked point.

Here is the html stuff

<div class="Container">
            <div id = 'left-div'>
                <canvas class = "Blackboard" id = "blackboard-canvas" >

                </canvas>
            </div>                  
            <div id='right-div'>
                <div id = 'tools-div'>
                    <ul>
                        <li><a href='#colorOption'>Color Options</a></li>
                        <li><a href='#toolbar-option'>Tool Bar</a></li>
                    </ul>
                    <div id='colorOption'>
                        <canvas id='color-option-canvas' >

                        </canvas>
                    </div>
                    <div id='toolbar-option'>
                        Tool bar options goes here
                    </div>
                </div>
            </div>

            <br style="clear:both;"/>
        </div>

and the relavent css

.Blackboard{

border-style: ridge;
border-color: gray;
border-width: 5px; 
width: 96%;
height: 96%;
cursor: crosshair;
position: relative;
-webkit-border-radius: 16px;
-webkit-box-shadow: 0px 6px 7px #0a0505;
  };

 .Blackboard:active{
cursor: crosshair;
  }

 .Container{
border-color: #666;
border-width: 10px;
border-style: inset;
background-color: gray;
width: 700px;
height: 400px;
 }

 #right-div, #left-div{
height: 100%;
 }
 #left-div{
float: left;
width: 60%;
 }
 #right-div{
float: right;
background-color: black;
width: 40%;
 }

Is there a way to 'normalize' it or or something?

EDIT:

here is a the jfiddle http://jsfiddle.net/EZktE/

... and the `getMousePosition` function? Maybe make a [fiddle](http://jsfiddle.net/) for this so people don't have to copy all this stuff to some test-environment. — Yoshi, Oct 17 '11 at 09:25

score 2 · Accepted Answer · answered Oct 17 '11 at 15:33

Your problem is that your canvas is assuming the default <canvas> size attributes of width=300 height=150. Those attributes set the coordinate system for the canvas, independently of any CSS-derived width and height attributes.

To resolve it, put this immediately after the line that finds the canvas element:

this.canvas.width = this.canvas.offsetWidth;
this.canvas.height = this.canvas.offsetHeight;

This also copes with the 96% scaling factor relative to its parent.

See http://jsfiddle.net/alnitak/9JtfW/

NB: your own fiddle doesn't work because your Blackboard class was created inside jsfiddle's default $(document).ready() handler so wasn't in scope when invoked from the inline handler in the HTML.

Thank you. So the this.canvasOffset* is the actual dimension of the canvas? — dchhetri, Oct 17 '11 at 17:52
strictly speaking it includes the margin, border and padding too. You should probably actually use `$(this.canvas).width()` etc but then you'll need to change your mouse position calculation to subtract your border and margin sizes. — Alnitak, Oct 18 '11 at 09:10

score 0 · Answer 2 · answered Oct 17 '11 at 15:24

0

Sure, just substract the OffsetX and OffsetY properties of your canvas DOMElement with the x and y you retrieve.

This will work correctly untill the user starts zooming in, thats a fairly difficult problem to tackle.

answered Oct 17 '11 at 15:24

TJHeuvel

12,403
4
37
46

Getting correct mouse position on Canvas when canvas size is relative?

2 Answers2