Mixing
HTML 5 Canvas - Get real coordinate when zooming
up vote
0
down vote
favorite
I finally achieved to implement a zoomable and panning canvas using this code as a base https://stackoverflow.com/a/3151987/5221943 .
Now I need to detect the real coordinate where the user clicked inside the canvas. I don't know how to convert the mouse page coordinate to the real world coordinate taking into account the user has already zoomed or panned the canvas. Any suggestion here?
javascript html5 canvas transform zoom
asked yesterday
xepe
5016
add a comment |
up vote
0
down vote
favorite
I finally achieved to implement a zoomable and panning canvas using this code as a base https://stackoverflow.com/a/3151987/5221943 .
Now I need to detect the real coordinate where the user clicked inside the canvas. I don't know how to convert the mouse page coordinate to the real world coordinate taking into account the user has already zoomed or panned the canvas. Any suggestion here?
javascript html5 canvas transform zoom
asked yesterday
xepe
5016
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I finally achieved to implement a zoomable and panning canvas using this code as a base https://stackoverflow.com/a/3151987/5221943 .
Now I need to detect the real coordinate where the user clicked inside the canvas. I don't know how to convert the mouse page coordinate to the real world coordinate taking into account the user has already zoomed or panned the canvas. Any suggestion here?
javascript html5 canvas transform zoom
asked yesterday
xepe
5016
I finally achieved to implement a zoomable and panning canvas using this code as a base https://stackoverflow.com/a/3151987/5221943 .
Now I need to detect the real coordinate where the user clicked inside the canvas. I don't know how to convert the mouse page coordinate to the real world coordinate taking into account the user has already zoomed or panned the canvas. Any suggestion here?
javascript html5 canvas transform zoom
javascript html5 canvas transform zoom
asked yesterday
xepe
5016
asked yesterday
xepe
5016
asked yesterday
xepe
5016
asked yesterday
xepe
5016
asked yesterday
xepe
5016
5016
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Here the code for gating the coordinates of the canvas
Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>answered yesterday
LDS
1846
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Here the code for gating the coordinates of the canvas
Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>answered yesterday
LDS
1846
add a comment |
up vote
0
down vote
Here the code for gating the coordinates of the canvas
Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>answered yesterday
LDS
1846
add a comment |
up vote
0
down vote
up vote
0
down vote
Here the code for gating the coordinates of the canvas
Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>answered yesterday
LDS
1846
Here the code for gating the coordinates of the canvas
Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>Call the DumpInfo function in the html canvas tag like
<canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined
<script type = "text/javascript" >
function DumpInfo(event) {
var info = document.getElementById("canvas");
//info.innerHTML += event.type + ", ";
var pos = getMousePos(info, event);
alert(pos.x);
alert(pos.y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>answered yesterday
LDS
1846
answered yesterday
LDS
1846
answered yesterday
LDS
1846
answered yesterday
LDS
1846
1846
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372328%2fhtml-5-canvas-get-real-coordinate-when-zooming%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
