I have some code here, and I am not sure what's going on.
I am using the touch events to try to track the x and y of the user's finger. If I change touchmove to mousemove, it will work on a computer. I need it to work on mobile. Please help! Thanks in advance!
var canvas = document.getElementById("canvas")
canvas.addEventListener("touchmove", function(e){
var x = event.clientX;
var y = event.clientY;
p.innerHTML = event.pageX + " " + event.pageY;
});
#canvas {
width: 100px;
height: 100px;
background-color: orange;
color: white;
}
<canvas id="canvas"></canvas>
<p id="p">hi</p>
Here it is with mousemove:
var canvas = document.getElementById("canvas")
canvas.addEventListener("mousemove", function(e){
var x = event.clientX;
var y = event.clientY;
p.innerHTML = event.pageX + " " + event.pageY;
});
#canvas {
width: 100px;
height: 100px;
background-color: orange;
color: white;
}
<canvas id="canvas"></canvas>
<p id="p">hi</p>
Related
The following code always shows the coordinates of the cursor below the cursor:
function showCoords(e) {
var x = event.clientX;
var y = event.clientY;
var coor = "(" + x + ", " + y + ")";
document.getElementById("box").innerHTML = coor;
var bx = document.getElementById("box");
bx.style.left = e.pageX - 50;
bx.style.top = e.pageY + 20;
}
function clearCoords() {
document.getElementById("box").innerHTML = "";
}
div.relative {
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
}
div.abs {
position: absolute;
top: 100px;
right: 50px;
width: 200px;
height: 100px;
background-color: yellow;
}
<body onmousemove="showCoords(event)">
<div class="relative">
<div class="abs" onmousemove="showCoords(event)" onmouseout="clearCoords()"></div>
</div>
<div id="box" style="width:100px; height:30px; position:absolute"></div>
</body>
I only want the coordinates to be visible when the mouse pointer is hovering over the yellow rectangle.
If I change <body onmousemove="showCoords(event)"> to <body>, the coordinates are never visible.
How do I get the coordinates be visible only when hovering over the yellow rectangle?
Move the onmousemove listener from the body to the element you want to listen on - div.abs in this case.
I'd recommend not using the onmousemove attribute, in favour of using an entirely javascript solution - just to keep javascript-y things together. Something like (untested)
var listenOn = document.querySelector(".abs");
listenOn.addEventListener("mousemove", ShowCoords);
I have my canvas and when I click I get X and Y, e.g. x=10 y=10, and when I use scrollbar drop and click in the same position I will get x= not 10 and y=not 10. Why?
<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
topCanvas = canvas.offsetTop;
leftCanvas = canvas.offsetLeft;
function click(e)
{
console.log("x="+(e.clientX-leftCanvas));
console.log("y="+(e.clientY-topCanvas));
}
</script>
Why scrollbar not helping..
let canvas = document.querySelector('canvas');
let topCanvas = canvas.offsetTop;
let leftCanvas = canvas.offsetLeft;
canvas.addEventListener('click', e => {
console.log('not considering scroll position');
console.log(" x=" + (e.clientX - leftCanvas));
console.log(" y=" + (e.clientY - topCanvas));
console.log('considering scroll position');
console.log(" x=" + e.layerX);
console.log(" y=" + e.layerY);
});
div {
border: 1px solid;
max-height: 300px;
overflow: auto;
}
canvas {
border: 1px solid;
width: 500px;
height: 1000px;
margin-left: 30px;
margin-top: 30px;
}
<div>
<canvas></canvas>
</div>
I want to create a polymer element for drawing shapes. This element have a canvas and a paper-dropdown-menu in its local dom. The idea is to draw using mouse on the canvas and once the drawing action is done, the dropdown-menu will show up next to the shape so one can select the name. My main problem here is: how to display the paper-dropdown-menu relative to the mouse position ?
As the user moves their mouse around over an element, the mousemove event is fired. You can listen to these events while the user is "drawing" and keep track of the mouse position:
var canvas = document.querySelector('.canvas');
var position = document.querySelector('.position');
canvas.addEventListener('mousemove', function(e) {
position.innerText =
'client x: ' + e.clientX +
' client y: ' + e.clientY;
});
.canvas {
background-color: grey;
width: 100px;
height: 100px;
}
<div class="canvas"></div>
<span class="position"></span>
The user will somehow stop drawing, and you can use the last mousemove event to figure out where to render the dropdown (via inline absolute positioning). In the following demo, the "dropdown" appears whenever a click occurs inside the canvas:
var canvas = document.querySelector('.canvas');
var position = document.querySelector('.position');
var dropdown = document.querySelector('.dropdown');
var lastPosition = {x: -100, y: -100};
canvas.addEventListener('mousemove', function(e) {
position.innerText =
'client x: ' + e.clientX +
' client y: ' + e.clientY;
lastPosition.x = e.clientX;
lastPosition.y = e.clientY;
});
canvas.addEventListener('click', function(e) {
dropdown.style.left = lastPosition.x + 'px';
dropdown.style.top = lastPosition.y + 'px';
});
.canvas {
background-color: grey;
width: 100px;
height: 100px;
}
.dropdown {
background-color: red;
height: 40px;
position: absolute;
top: -100px;
left: -100px;
width: 20px;
}
<div class="canvas"></div>
<span class="position"></span>
<div class="dropdown"></div>
I'm trying to adjust the size to correctly be position more in the middle and a larger div. I would like it to be 500x500. What I'm trying to do is do a classic version of what Windows Paint is.
The issue is adjusting the 'canvas' to the middle stops the paint brush to 'draw'.
Here is the code, I have so far.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
width: 500px;
height: 500px;
margin: auto;
top: 50%;
left: 50%;
width: 90%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div id="paint" >
<canvas id="myCanvas"></canvas>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
</script>
</body>
</html>
Get rid of the styling on body and replace it with this:
#paint {
height: 500px;
margin: auto;
width: 90%; /* you also had width: 500px, which one did you want? */
border: 3px solid #73AD21;
padding: 10px;
}
Fiddle - Looks like it's working okay with that change.
I'm trying to create an interactive app to enable users to select the shape they want by clicking on the different buttons for the shapes and then enable them to draw the shape wherever they will click on the canvas.
This part is okay but when i click on a different button to draw a shape it seems that the previous shape comes along with the new shape and seems to be overlapped.
Here's the pic:
As you see, the rectangle and the round shape becomes overlapped.
I've tried to use layers of canvas to fix it but now the rectangle button is not working and the rounded shape is not appearing where the user clicks, rather like 30px away from it.
Here's the codes:
<!DOCTYPE html>
<html>
<head>
<script>
function initiateCanvasRectangle()
{
var ctx = document.getElementById('myCanvas1').getContext('2d');
ctx.canvas.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
});
ctx.canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
ctx.fillRect(mouseX,mouseY,100,50);
ctx.fillStyle = "purple";
});
}
function initiateCanvasCircle()
{
var ctx = document.getElementById('myCanvas2').getContext('2d');
ctx.canvas.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
});
ctx.canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
ctx.beginPath();
ctx.arc(mouseX, mouseY, 30, 0, 2 * Math.PI, false);
ctx.fillStyle = 'pink';
ctx.fill();
});
}
function rect(){
window.addEventListener('click', function(event) {
initiateCanvasRectangle();
});
}
function drawRect()
{
rect();
}
function circle(){
window.addEventListener('click', function(event) {
initiateCanvasCircle();
});
}
function drawCircle()
{
circle();
}
</script>
<style>
BUTTON.rect {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background-color: white;
border:2px solid black;
}
#tbl {
border-collapse:collapse;
}
</style>
</head>
<body>
<table border="1" id="tbl">
<tr><td><button class="circle" onclick="drawCircle(); return true;" style="padding:20px 40px 20px 40px;">Circle</button>
</td>
<td>
<button class="rect" onclick="drawRect(); return true;" style="padding:20px 40px 20px 40px;"></button>
</td></tr>
</table>
<p>
<div style="position: relative;">
<canvas id="myCanvas1" width="1100" height="400" style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid black"></canvas>
<canvas id="myCanvas2" width="1100" height="400" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
</body>
</html>
Can you tell me how to fix it? Any help will be much appreciated. Thanks.