I want to print out a picture whenever the mouse is clicked on the screen.
This is my current Javascript and HTML code. It only prints the h1, I don't know what I am doing wrong.
var image = document.getElementById("im"); // idenfitifes span eleme nt
var roll = false; // to know the image is moving or not , intitally it is not moving state hence value is false
image.addEventListener("mousedown", start, false); // at starting image is in rest
function mouse_move(x) // funciton to move image with mouse
{
var newX = x.clientX; // copies mouse x position
var newY = x.clientY; // copies mouse y position
image.style.left = newY + "px"; // assigns latest mouse position to span (image)
image.style.top = newX + "px";
}
function start(x) // span (image) starting no rolling mode
{
if(roll){ // when the mouse is moving
document.removeEventListener("mousemove", mouse_move); // initiages image span move
roll = !roll;
return;
}
roll = !roll; // when the mouse is not moving
document.addEventListener("mousemove", mouse_move, false);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Picture of Me! </title>
</head>
<body>
<h1> HTML File to move image along with mouse movement. </h1>
<script type="text/javascript" src="h5j.js">
<span id="im">
<img src="https://static01.nyt.com/images/2020/04/27/us/politics/00-trump-cand-page/00-trump-cand-page-mediumSquareAt3X.jpg" height="120" width="120"></img>
</span>
</body>
</html>
You Use The AddEventListener Function Like This
document.addEventListener("mousedown", mouse_move, false);
the syntax for addEventListener is:
addEventListener("Event Name", "Your Function name, the function you want to run after event happening")
when you need to run in the click event, you simply need to change Event name from "mousedown" to "click" , example:
document.addEventListener("click", mouse_move, false);
you have to use "click" event instead of "mousedown"
like:
document.addEventListener("click", mouse_move, false);
<code>
var image = document.getElementById("im");
var roll = false;
image.addEventListener("click", start, false);
function mouse_move(x)
{
var newX = x.clientX; // copies mouse x position
var newY = x.clientY; // copies mouse y position
image.style.left = newX + "px";
image.style.top = newY+ "px";
}
function start(x) // span (image) starting no rolling mode
{
if (roll) { // when the mouse is moving
document.removeEventListener("click", mouse_move); // initiages image span move
roll = !roll;
return;
}
roll = !roll; // when the mouse is not moving
}
document.addEventListener("click", mouse_move, false);
</code>
It looks like your trying to get the image element by id, before the DOM has finished loading.
I would suggest one of the following:
Move the <script> tag to the bottom of the page between </body> and </html>
Add defer to the <script> tag, which will cause the script to be loaded after the DOM.
Move the first block of your JavaScript into a DOMContentLoaded event listener as shown below.
var roll = false;
var image;
document.addEventListener('DOMContentLoaded', function(){
image = document.getElementById("im");
image.addEventListener("mousedown", start, false);
});
Related
I'm using zimjs library for my canvas project. I'm trying to do continued pressing around the circles. When pressing and moving over the circles, circles must be change color. But pressmove event don't start outer the circles. You need to start to press over the circle. if I start pressing over the circle, the other circle is not affected.
Here is zimjs events:
https://zimjs.com/tips.html (See Events)
What do I want approximately?
https://zimjs.com/intro/index.html (See drag to eraser example. I want like this but without eraser. Only single pressing)
Note: I can't use mouse events. They didn't work on phone touchs.
See snippet:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Outside Template</title>
<script src="https://zimjs.org/cdn/1.3.0/createjs.js"></script>
<script src="https://zimjs.org/cdn/10.9.0/zim.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script>
var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 600;
var height = 400;
var color = white; // or any HTML color such as "violet" or "#333333"
var outerColor = light;
var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
var stage = frame.stage;
var circle1 = new Circle(20, "red").pos(100,40, stage)
var circle2 = new Circle(20, "blue").pos(200,40, stage)
circle1.on("pressmove", () => {
circle1.color = "green"
stage.update()
console.log("Circle - 1 || Circles pressmove doesn't work when pressing start the outside")
})
circle2.on("pressmove", () => {
circle2.color = "green"
stage.update()
console.log("Circle - 2 || Circles pressmove doesn't work when pressing start the outside")
})
var button = new Button(140, 100, "reset", grey, dark).center(stage).tap(() => {
circle1.color = "red"
circle2.color = "blue"
stage.update()
})
new Label("Pressmove can be start anywhere", 16).pos(0, 300)
new Label("When pressing and moving over the circles,", 16).pos(0, 320)
new Label("circles must be select and change color,", 16).pos(0, 340)
stage.on("pressmove", () => console.log("Stage !!. Stage pressmove doesn't work when pressing outside the circles"))
stage.update();
}); // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
</body>
</html>
It is true that the pressmove event only works as you press on an object and move. If you want to start the press off the object or indeed anywhere then you use stage.on("stagemousedown", function); Mouse events DO work on mobile they are triggered by a touch so you do not even have to think of it. There is also "stagemousemove" and "stagemouseup". Objects on the stage get "mousedown", "presssmove", "pressup", "mouseover", "mouseout", etc. Usually we would change color on "mouseover" and change back on "mouseout" - ZIM has hov() that will do that. Or a Button() and Label() have built in backgroundColor and rollBackgroundColor.
If you really need to press anywhere before activating a change of color you could do something like this to remember the mousedown stage in general:
let mousedown = false;
stage.on("stagemousedown", ()=>{mousedown=true});
stage.on("stagemouseup", ()=>{mousedown=false});
const circle = new Circle().center();
circle.on("mouseover", ()=>{
if (mousedown) {
circle.color = red;
stage.update();
}
});
Or you could specifically add a stagemousemove event inside a stagemousedown event and remove it in a stagemouseup event to get the equivalent to a stage pressmove event. The pressmove event was created to help with dragging objects and usually, we do not drag the stage.
Hope this helps and apologies for the delay - you are welcome to join us at https://zimjs.com/slack for discussion! Cheers.
When I'm on Firefox, canvas calls requestPointerLock and I'm pressing F11 for fullscreen - I see that event mousemove is being triggered. This makes some things to move which must be static because mouse is not moving.
I tried to create a demo, but I get error Blocked pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set.
So here is a code example which you can read at least.
HTML part:
<canvas id="canvas" width="800" height="600"></canvas>
JavaScript part:
canvas = document.getElementById('canvas');
document.addEventListener("click", function(e) {
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock ||
canvas.webkitRequestPointerLock;
if (canvas.requestPointerLock)
canvas.requestPointerLock();
}, false);
document.addEventListener("pointerlockchange", plChange, false);
document.addEventListener("mozpointerlockchange", plChange, false);
function plChange(e) {
var controlEnabled = (document.mozPointerLockElement === canvas ||
document.webkitPointerLockElement === canvas ||
document.pointerLockElement === canvas);
if (!controlEnabled) {
window.removeEventListener("mousemove", mouseMove);
} else {
window.addEventListener("mousemove", mouseMove, false);
}
}
function mouseMove(e) {
// This is being executed on window resize
console.log(e.movementY);
}
As a result, when window is going fullscreen (and Firefox does it slooowly) - I get e.movementY printed in a console and value is not 0 always.
The question is how can I prevent this Firefox "feature" so that mouse move event is not being triggered?
Found a solution to mitigate the problem. Unfortunately there's no viable solution that could actually fix the problem, because whenever Firefox resizes its window, the mouse is somehow dragged along so that the pointer's position relative to the top left corner remains unchanged. However, since it moves across the screen, a spurious mousemove event is triggered.
A way to mitigate this is adding a resize handler to the window object to check whether a window resize is taking place - and if so, set a flag and use it to have the mouse move handler bail out. Unfortunately you cannot just reset this flag when the mouse move fires, because you would still get occasional spurious mousemove events. Instead you have to set off a timeout that eventually resets the flag when you can be relatively certain that the browser window has been completely resized.
I managed to get that done with my test case which looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>canvas Test Case</title>
<style type="text/css">
body {
background-color: silver;
}
canvas {
background-color: white;
}
</style>
<script type="application/javascript">
/* <![CDATA[ */
'use strict';
var canvas;
var this_timeout = null;
document.addEventListener('DOMContentLoaded', function (p_event) {
canvas = document.getElementById('canvas');
document.addEventListener("click", function (p_event) {
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock ||
canvas.webkitRequestPointerLock;
if (canvas.requestPointerLock)
canvas.requestPointerLock();
}, false);
document.addEventListener("pointerlockchange", plChange, false);
document.addEventListener("mozpointerlockchange", plChange, false);
window.addEventListener('resize', function (p_event) {
// Use this handler to set a flag that a resize event is taking place.
// Using the timeout ID actually hits two birds with one stone: It serves as a
// flag that a resize is actually taking place, plus it allows us to reset the
// timeout if it hasn't expired when another one fires.
if(this_timeout)
clearTimeout(this_timeout);
this_timeout = setTimeout(function () { this_timeout = null; }, 250);
console.log('Resizing...'); }, true);
}, false);
function stoppedResize() {
// If the timeout expires, reset the timeout id to show that we are done resizing.
this_timeout = null;
}
function plChange(p_event) {
var controlEnabled = (document.mozPointerLockElement === canvas ||
document.webkitPointerLockElement === canvas ||
document.pointerLockElement === canvas);
if (!controlEnabled) {
console.log('Disabling mouse tracker...');
window.removeEventListener("mousemove", mouseMove);
} else {
console.log('Enabling mouse tracker...');
window.addEventListener("mousemove", mouseMove, false);
}
}
function mouseMove(p_event) {
// Check whether there's a timeout running. If yes, just bail out...
if(this_timeout)
{
console.log('Skipping...');
return;
}
console.log('Mouse movement detected!');
}
/* ]]> */
</script>
</head>
<body>
<header><h1>canvas Test Case</h1></header>
<main>
<canvas id="canvas" width="800" height="600" />
</main>
</body>
</html>
By doing this you can easily mitigate this problem. Unfortunately it's not the clean solution that I would have preferred, but given the cirumstances, this is the best way to deal with the problem that I could come up with.
As for your other question, I guess you wanted to post an example here on SO? If yes, I think that you have run into some restrictions imposed on the code. Since everything seems to take place in an iframe, I guess that certain actions have been disallowed. Attaching certain event handlers is obviously affected.
I have two problems: how can I draw rectangles with mouse o html canvas, and why isn't my timer showing up.
I have tried every code in here but nothing seems to work. Thank you!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Resize</title>
<style>
canvas {
border: 1px solid black;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<canvas></canvas>
<p id="timer"></p>
<script src="canvas.js"></script>
</body>
</html>
JAVASCRIPT
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//TIMER
var timer = document.getElementById('timer');
var counter = 0;
function setup(){
timer = createP('timer');
setInterval(timeIt, 1);
}
function timeIt (){
timer.html(counter);
counter+=134;
}
Here's the fiddle
https://jsfiddle.net/rita24/0vLwj3go/2/
Thank you!
For the canvas part, you can just add the event listener to keep track on the mouseup, mousemove and mousedown event.
canvas.addEventListener("mousedown", function (e) {
drawing = true;
lastPos = getMousePos(canvas, e);
}, false);
canvas.addEventListener("mouseup", function (e) {
drawing = false;
}, false);
canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(canvas, e);
}, false);
// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
This will help you create the rectangle on canvas.
ctx.rect(mousePos.x,mousePos.y,lastPos.x-mousePos.x,lastPos.y-mousePos.y);
ctx.stroke();
You can check this out on how to work with mouse drawing on the canvas: http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
For the timer part, you haven't called the setup() function and you are using jQuery html() function to setup the text inside the p element. Use .innerHTML to change the text inside the p element.
Here is the updated link for your JSfiddle: https://jsfiddle.net/0vLwj3go/7/
Hope this can help!
Elvis' answer is great, but since I had already started mine this morning, I'll post it anyway.
For one thing, you aren't calling setup() anywhere, so the timer never gets set and the timer <p> never gets any content. Here's my jsfiddle, which is very similar to Elvis', but shows the timer without scrolling, and includes an example of how to animate the drawing of rectangles.
I have a "ship" that I have drawn on my canvas and I want to be able to drag it left and right on the bottom of the canvas when it is clicked. I have done some research but I'm having no luck.
I'm assuming I use onMouseDown to do this so I have this when the page loads...
canGame.onMouseDown = canCanvas.onMouseDown(e);
and here is the code that creates my ship
gShip = spriteNew("MediumSpringGreen", 230, 950, 150, 20);
From there I am not really sure what to do. I have a gameUpdate function which moves the invaders down the screen. A gameInit function that will draw the invaders and ship on the screen. Also I have a gameDraw function which draws everything on the screen. I have a few others which are not really important for my issue.
Here is the jsfiddle with the full source code. For some reason though it will run on my browser when I run the HTM file but not in jsfiddle.
http://jsfiddle.net/f66bk/2/
Like I said in comment, the best way of doing this kind of behaviour is by using the events mouseup, mousedown and mousemove.
I defined a var named isMouseDown to know that the ship is dragged that I set to true on mousedown and false on mouseup:
canGame.onMouseDown = function() { isMouseDown = true }
canGame.onMouseUp = function() { isMouseDown = false }
You will also need the event onmousemove to get your mouse position to redraw your ship properly:
canGame.onMouseUp = function(event) { moveShip(event, this) }
In the function moveShip, you can get your mouse position and set the position of your ship properly:
function moveShip(evt, obj) {
if(!isMouseDown)
return;
var target = evt.target || evt.srcElement,
rect = target.getBoundingClientRect(),
offsetX = evt.clientX - rect.left;
gShip.Rect.X = offsetX - gShip.Rect.Width/2;
}
Here is your jsfiddle :)
After unsucessfull thread I'm asking for help again. How do I let the user add some text on the canvas by dragging text to their desired position? Let's say, they enter the text somewhere somehow, it appears on a canvas and then user can drag that text to desired position. Which technique I should use? Is there any way for someone to write a quick code?
Here's an outline of how to drag text on html canvas:
Create a text object that holds info about this word (text, x,y,width,height).
Create an array to hold all text objects
On mousedown, hit-test each text object in the array to see if the user mousedown'ed on a text
On mousemove, move the selected text by the distance that the user dragged the mouse
Demo: http://jsfiddle.net/m1erickson/tLvMK/
Here's commented Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// variables used to get mouse position on the canvas
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// some text objects
var texts=[];
// some test texts
texts.push({text:"Hello",x:20,y:20});
texts.push({text:"World",x:20,y:70});
// calculate width of each text for hit-testing purposes
ctx.font="16px verdana";
for(var i=0;i<texts.length;i++){
var text=texts[i];
text.width=ctx.measureText(text.text).width;
text.height=16;
}
// this var will hold the index of the selected text
var selectedText=-1;
// START: draw all texts to the canvas
draw();
// clear the canvas draw all texts
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<texts.length;i++){
var text=texts[i];
ctx.fillText(text.text,text.x,text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x,y,textIndex){
var text=texts[textIndex];
return(x>=text.x &&
x<=text.x+text.width &&
y>=text.y-text.height &&
y<=text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<texts.length;i++){
if(textHittest(startX,startY,i)){
selectedText=i;
}
}
}
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
// also done dragging
function handleMouseOut(e){
e.preventDefault();
selectedText=-1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e){
if(selectedText<0){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var text=texts[selectedText];
text.x+=dx;
text.y+=dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>