canvas x, y value on a reponsive changing page with screen size
I am trying to get the x, y coordinates from two different canvases on one page which can change position with responive screen resizing.
The test page looks like the picture below
with my current code when i click on either of the black dots i get the correct x, y coordinates for the canvas I clicked within.
however if the page is resized and the right canvas drops below the left canvas, when i click on the now lower canvas black dot the Y value is miles out and i can't work out a way around this.
The code is shown below which can be run in full screen with the response resizing.
My goal is to know when the black dot has been clicked on and what canvas this event happend within. It must be able to do this with the page resizing on different screens
Just to clarify the Y coordinates of canvas 2 top line is 15. If I rezive and canvas 2 drops below canvas 1 the y becomes approx 323 on the top line but I need it to stay at the same value as it was before resizing
Any help would be great thanksyou
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>canvas responsive
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
add a comment |
I am trying to get the x, y coordinates from two different canvases on one page which can change position with responive screen resizing.
The test page looks like the picture below
with my current code when i click on either of the black dots i get the correct x, y coordinates for the canvas I clicked within.
however if the page is resized and the right canvas drops below the left canvas, when i click on the now lower canvas black dot the Y value is miles out and i can't work out a way around this.
The code is shown below which can be run in full screen with the response resizing.
My goal is to know when the black dot has been clicked on and what canvas this event happend within. It must be able to do this with the page resizing on different screens
Just to clarify the Y coordinates of canvas 2 top line is 15. If I rezive and canvas 2 drops below canvas 1 the y becomes approx 323 on the top line but I need it to stay at the same value as it was before resizing
Any help would be great thanksyou
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>canvas responsive
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
add a comment |
I am trying to get the x, y coordinates from two different canvases on one page which can change position with responive screen resizing.
The test page looks like the picture below
with my current code when i click on either of the black dots i get the correct x, y coordinates for the canvas I clicked within.
however if the page is resized and the right canvas drops below the left canvas, when i click on the now lower canvas black dot the Y value is miles out and i can't work out a way around this.
The code is shown below which can be run in full screen with the response resizing.
My goal is to know when the black dot has been clicked on and what canvas this event happend within. It must be able to do this with the page resizing on different screens
Just to clarify the Y coordinates of canvas 2 top line is 15. If I rezive and canvas 2 drops below canvas 1 the y becomes approx 323 on the top line but I need it to stay at the same value as it was before resizing
Any help would be great thanksyou
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>canvas responsive
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
I am trying to get the x, y coordinates from two different canvases on one page which can change position with responive screen resizing.
The test page looks like the picture below
with my current code when i click on either of the black dots i get the correct x, y coordinates for the canvas I clicked within.
however if the page is resized and the right canvas drops below the left canvas, when i click on the now lower canvas black dot the Y value is miles out and i can't work out a way around this.
The code is shown below which can be run in full screen with the response resizing.
My goal is to know when the black dot has been clicked on and what canvas this event happend within. It must be able to do this with the page resizing on different screens
Just to clarify the Y coordinates of canvas 2 top line is 15. If I rezive and canvas 2 drops below canvas 1 the y becomes approx 323 on the top line but I need it to stay at the same value as it was before resizing
Any help would be great thanksyou
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY;
console.log(rect);
console.log('x: ' + x + ' y: ' + y);
}* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="canvas.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div><canvas id="den"></canvas> </div>
</div>
<div class="col-6">
<div><canvas id="wc"></canvas> </div>
</div>
</div>
<div><script src="canvas.js"></script> </div>
</body>
</html>canvas responsive
canvas responsive
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
edited Nov 19 '18 at 12:49
Steve8428
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
asked Nov 19 '18 at 12:40
Steve8428Steve8428
11812
11812
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I believe I have it working. probably better way to do this but at the moment its working when page is resized.
under the click function I get the page height which may have been resized hence the reason for doing this under the click function.
If the width of the page has gone below the width in css to change page layout, an if function will increase a compensator to take away from the Y axis to give the correct coordinates.
So far, its working ok, will need to test this more with 4 canvases in a row and on different screen sizes
var Ycompensator = 0;
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - rect.top;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
var w = window.innerWidth;
if (w < 768){
Ycompensator = 324;
}
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - Ycompensator;
console.log('x: ' + x + ' y: ' + y);
}
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53374870%2fcanvas-x-y-value-on-a-reponsive-changing-page-with-screen-size%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe I have it working. probably better way to do this but at the moment its working when page is resized.
under the click function I get the page height which may have been resized hence the reason for doing this under the click function.
If the width of the page has gone below the width in css to change page layout, an if function will increase a compensator to take away from the Y axis to give the correct coordinates.
So far, its working ok, will need to test this more with 4 canvases in a row and on different screen sizes
var Ycompensator = 0;
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - rect.top;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
var w = window.innerWidth;
if (w < 768){
Ycompensator = 324;
}
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - Ycompensator;
console.log('x: ' + x + ' y: ' + y);
}
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
add a comment |
I believe I have it working. probably better way to do this but at the moment its working when page is resized.
under the click function I get the page height which may have been resized hence the reason for doing this under the click function.
If the width of the page has gone below the width in css to change page layout, an if function will increase a compensator to take away from the Y axis to give the correct coordinates.
So far, its working ok, will need to test this more with 4 canvases in a row and on different screen sizes
var Ycompensator = 0;
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - rect.top;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
var w = window.innerWidth;
if (w < 768){
Ycompensator = 324;
}
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - Ycompensator;
console.log('x: ' + x + ' y: ' + y);
}
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
add a comment |
I believe I have it working. probably better way to do this but at the moment its working when page is resized.
under the click function I get the page height which may have been resized hence the reason for doing this under the click function.
If the width of the page has gone below the width in css to change page layout, an if function will increase a compensator to take away from the Y axis to give the correct coordinates.
So far, its working ok, will need to test this more with 4 canvases in a row and on different screen sizes
var Ycompensator = 0;
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - rect.top;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
var w = window.innerWidth;
if (w < 768){
Ycompensator = 324;
}
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - Ycompensator;
console.log('x: ' + x + ' y: ' + y);
}
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
I believe I have it working. probably better way to do this but at the moment its working when page is resized.
under the click function I get the page height which may have been resized hence the reason for doing this under the click function.
If the width of the page has gone below the width in css to change page layout, an if function will increase a compensator to take away from the Y axis to give the correct coordinates.
So far, its working ok, will need to test this more with 4 canvases in a row and on different screen sizes
var Ycompensator = 0;
function circle (name, setTemp, temp){
c=document.getElementById(name);
var ctx=c.getContext("2d");
c.width = 200;
c.height = 300;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(100,170,5,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
c=document.getElementById('den');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - rect.top;
console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
var w = window.innerWidth;
if (w < 768){
Ycompensator = 324;
}
c=document.getElementById('wc');
var rect = c.getBoundingClientRect()
var x = event.pageX - rect.left;
var y = event.pageY - Ycompensator;
console.log('x: ' + x + ' y: ' + y);
}
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
answered Nov 19 '18 at 14:49
Steve8428Steve8428
11812
11812
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53374870%2fcanvas-x-y-value-on-a-reponsive-changing-page-with-screen-size%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
