Develop Reference

How to hover on element using elementFromPoint method?

I am making a windows simulator for android. I have already made my cursor using canvas. So, I want to use elementFromPoint method to hover on the element using the cursor.
// pos.x and pos.y are the co-ordinate of the cursor
canvas.style.display = "none";
let element = document.elementFromPoint(pos.x, pos.y);
// A method to activate the hover stage so that it could change its background
// like element.hover();
/* Code here */
canvas.style.display = "block";
It would be greatful if you help me.

How do I make a HTML canvas rectangle resize along with mouse drag?

I am creating a web-based annotation application for annotating images via the HTML canvas element and Javascript. I would like the user to mouse down to indicate the start of the rectangle, drag to the desired end coordinate and let go to indicate the opposite end of the rectangle.
Currently, I am able to take the starting coordinates and end coordinates to create a rectangle on the image with the context.rects() function, however as I am uncertain on how to resize a specific rectangle on the canvas, that leaves me with the rectangle only being drawn after the user has released the mouse click.
How would I be able to resize a specific rectangle created onmousedown while dragging?
The following is the code snippet that performs the function:
var isMouseDown = false;
var startX;
var startY;
canvas.onmousedown = function(e) {
if(annMode){
isMouseDown = true;
var offset = $(this).offset();
startX = parseInt(e.pageX - offset.left);
startY = parseInt(e.pageY - offset.top);
}
};
canvas.onmousemove = function(e) {
if(isMouseDown) {
var offset = $(this).offset();
var intermediateX = parseInt(e.pageX - offset.left);
var intermediateY = parseInt(e.pageY - offset.top);
console.log(intermediateX);
}
};
canvas.onmouseup = function(e) {
if(annMode&&isMouseDown){
isMouseDown = true;
var offset = $(this).offset();
var endX = parseInt(e.pageX - offset.left);
var endY = parseInt(e.pageY - offset.top);
var width = endX - startX;
var height = endY - startY;
context.strokeStyle = "#FF0000";
context.rect(startX, startY, width, height);
context.stroke();
}
isMouseDown = false
};

Here my handy-front-end scripts come in handy!
As I understood the question, you wanted to be able to move your mouse to any point on the canvas, hold the left mouse button, and drag in any direction to make a rectangle between the starting point and any new mouse position. And when you release the mouse button it will stay.
Scripts that will help you accomplish what you are trying to do:
https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#canvasjs
https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#pointerjs
Both scripts just makes the code a lot cleaner and easier to understand, so I used those.
Here is a fiddle as simple as you can make it really using
const canvas = new Canvas([]);
and
const mouse = new Pointer();
https://jsfiddle.net/0y8cbao3/
Did I understand your question correctly?
Do you want a version with comments describing every line and what is does?
There are still some bugs at the moment but im going to fix those soon!
EDIT
After reading your questions again, I reacted to: "...however as I am uncertain on how to resize a specific rectangle on the canvas...".
Canvas is like an image. Once you have drawn to it, you can NOT "resize" different shapes. You can only clear the whole canvas and start over (ofcourse you can clear small portions too).
That's why the Canvas helper is so helpful. To be able to "animate" the canvas, you have to create a loop that redraws the canvas with a new frame each 16ms (60 fps).

The canvas API does not preserve references to specific shapes drawn with it (unlike SVG). The canvas API simply provides convenient functions to apply operations to the individual pixels of the canvas element.
You have a couple options to achieve a draggable rectangle:
You can position a styled div over your canvas while the user is dragging. Create a container for your canvas and the div, and update the position and size the div. When the user releases, draw your rectangle. Your container needs to have position: relative and the div needs to be absolutely positioned. Ensure the div has a higher z-index than the canvas.
In your mouse down method, set div.style.display to block. Then update the position (style.left, style.top, style.width, and style.height) as the mouse is dragged. When the mouse is released, hide it again (style.display = 'none').
You can manually store references to each item you want to draw, clear the canvas (context.clearRect), and redraw each item on the canvas each frame. This kind of setup is usually achieved through recursive usage of the window.requestAnimationFrame method. This method takes a callback and executes on the next draw cycle of the browser.
The first option is probably easier to achieve in your case. If you plan to expand the capabilities of your app further, the 2nd will provide more versatility. A basic loop would be implemented as so:
// setup code, create canvas & context
function mainLoop() {
context.clearRect(0, 0, canvas.width, canvas.height);
/** do your logic here and re-draw **/
requestAnimationFrame(mainLoop);
}
function startApp() {
requestAnimationFrame(mainLoop)
}
This tutorial has detailed explanation of event loops for HTML canvas: http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing
I also have a fully featured implementation on my GitHub that's part of rendering engine I wrote: https://github.com/thunder033/mallet/blob/master/src/mallet/webgl/webgl-app.ts#L115

how to add mouse pointer position to custom mouse pointer in createjs

Here I custom my mouse pointer to circle on that circle I want mouse pointer. Initially mouse pointer is on circle but when I moved mouse on stage mouse pointer is not on exact position on circle. 3
How to get exact position of each?
var cursor;
createjs.Touch.enable(stage);
stage.enableMouseOver();
cursor = new createjs.Shape(new createjs.Graphics().beginFill("#000000").drawCircle(0, 0, 25));
cursor.cursor = "pointer";
stage.addChild(cursor);
stage.addEventListener("stagemousemove", handleMouseMove);
stage.update();
function handleMouseMove(event) {
cursor.x = stage.mouseX;
cursor.y = stage.mouseY;
stage.update();
}

Can you clarify your question?
Here is a fiddle of your code: http://jsfiddle.net/j6erzwgn/1/
I removed the "updateStage" call from your handleMouseMove, and put it in a ticker event, since mouse events fire a lot faster than the stage needs.
I changed the Ticker to use RAF so it is nice and smooth.
Here is a sample
createjs.Ticker.on("tick", stage);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
It seems to run fine. If you notice a slight delay, that is somewhat expected with custom cursors, since they aren't updated in synch with the system cursor.
Does that help? I am not sure what your other questions are asking.

Disappear object on mouse click on that object in javascript. In my case I want to disappear a bouncing ball on the click of the mouse

I am trying to disappear a moving 2D ball on the click of the mouse. And also I want to do the same on the touch event if it is on the screen touch environment. The problem is that the balls keep moving in the random direction and I want to hide the ball whom I click on.
I used Javascript as I have already mentioned and here is the code which I used to draw ball.
function beginDrawCircle(a,b,color){
ctx.beginPath();
ctx.arc(a, b, ballRadius, 0, Math.PI*2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
I am providing an extra information that I have created three such balls now the click on any one of the ball it should disappear.

Is the ball an IMG, DIV or some other tag? If so, why not add an onclick event handler and set its display to none?
<img src="ball.png" id="ball" onclick="this.style.display='none'"/>

Simply use this :
document.getElementById("ball").onclick = foo;
foo(){
this.style.display = 'none';
}

As you didn't specify if you were working with jQuery or something like that, a solution in pure Javascript could be:
//Assuming all the balls are of class ".ball"
var balls = document.querySelectorAll(".ball");
Array.prototype.forEach.call(balls, function(ball){
ball.addEventListener("click", function(event){
ball.style.display = "none";
});
});

How to write "drag" event for objects on canvas?

(i correct the mousedown thing..)
What i want to realize is to drag a ball on the canvas and then the ball will follow the mouse and change its color.
Once the mouse releases it, its color turns back to original.
i use "break" because only one ball could be dragged at one time.
Now the problem is,
"drag" seems weird, it seems "dragging" the first ball, but only mousemove(no mouse press) is ok right after the first ball.
the color doesn't change
main function below (complete code here http://jsfiddle.net/nyTkU/1/):
var mousePress = false;
var mouseEvent = function(){
$(canvas).mousedown(function(e){
mousePress = true;
$(canvas).mousemove(function(e){
for(var i=0;i<figureNum;i++){
var distX=e.pageX-balls[i].x;
var distY=e.pageY-balls[i].y;
var distance = Math.sqrt((distX*distX)+(distY*distY));
if(distance<=20){
balls[i].x=e.pageX;
balls[i].y=e.pageY;
if(mousePress){
balls[i].c="#F05133";
}
break;
}
//else{balls[i].c="#FFED79";}
}
});
});
$(canvas).mouseup(function(e){
mousePress=false;
//for(var i=0;i<figureNum;i++){
// balls[i].c="#FFED79";
//}
})
setTimeout(animate,speedMouse);
}
Many many thanks.

You have two mouseDown events...maybe the second one should be mouseUp?
I'm still a little confused on your desired functionality. Do you want the ball to move only if mouseDown=true or a ball should move if it is clicked once? Because you should be using click() handler in the second case.
Your mouseMove seems odd as well...are you trying to get any ball within a certain distance D to bind to the mouse coordinates? That will create some odd behavior.
Best way to do this would be:
1) On mouseDown, detect if a ball has been selected and save that ID. (set mousePressed=true)
2) On mouseMove, if mousePressed=true && ball is selected, bind that ball to the mouse coordinates. Do not update() this ball with any velocity.
3) On mouseUp, set mousePressed=false and clear any selected Ball