Member Avatar for mklein

Dear all

I came across the following very simple code for dragging a square around using javascript. It is drawn on the html5 canvas. Despite being very simple it has certainly exposed some gaps in my pretty flakey javascript knowledge. I am generally ok with the idea of drag and drop (i.e. start drag on mouse click, stop drag on mouse release) but my questions are as follows:

(1) I cannot see where the variable e is defined, yet it is used all the time.

(2) In the init funciton at the bottom, an onmousedown listener seems to be attached to the canvas. However it equals the function myDown, but myDown doesn't have parentheses after it. So the myDown function is not actually going to be exectuted. So what is it doing instead?

Thanks in advance. I have tried to research this myself but haven't had any success yet.

Matt

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Drag and Drop Test</title> 
</head> 
<body> 
<section> 

<div> 
<canvas id="canvas" width="400" height="300"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
</div> 

<script type="text/javascript"> 

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var dx = 5; 
var dy = 3; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
 ctx.beginPath(); 
 ctx.rect(x,y,w,h); 
 ctx.closePath(); 
 ctx.fill(); 
} 

function clear() { 
 ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
 canvas = document.getElementById("canvas"); 
 ctx = canvas.getContext("2d"); 
 return setInterval(draw, 10); 
} 

function draw() { 
 clear(); 
 ctx.fillStyle = "#FAF7F8"; 
 rect(0,0,WIDTH,HEIGHT); 
 ctx.fillStyle = "#444444"; 
 rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e){ 
 if (dragok){ 
  x = e.pageX - canvas.offsetLeft; 
  y = e.pageY - canvas.offsetTop; 
 } 
} 

function myDown(e){ 
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
 e.pageY > y -15 + canvas.offsetTop){ 
  x = e.pageX - canvas.offsetLeft; 
  y = e.pageY - canvas.offsetTop; 
  dragok = true; 
  canvas.onmousemove = myMove; 
 } 
} 

function myUp(){ 
 dragok = false; 
 canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 

</script> 

</section> 
</body> 
</html>
  • 2 Contributors
  • 3 Replies
  • 145 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Graphix
Member Avatar for Graphix

The event argument is automatically passed on with the function, alternatively you can use:

canvas.onmousedown = function(e) {
 return myDown(e);
}

I am not yet familiar with the HTML 5 javascript methods, but it appears as if the init() function formats the canvas into a moveable object, and then redraws it every 10ms. If the user presses on the moveable object, the dragok variable is true and the canvas is moved as long as the mouse is down, which turns the dragok variable false.

~G

Edited by Graphix because: n/a
Member Avatar for mklein

Thanks Graphix

So, am I right in thinking that, in this line we are discussing, we are not telling the myDown function to execute. Instead we are adding the the myDown method to the canvas.

I tried the following: alert(canvas.onmousedown) and I got a pop up containing all of the myDown code? So it seems we have copied the method to the canvas and it is now one of its properties?

Thanks again for your help

Matt

Member Avatar for Graphix

Well, you added an event listener, that is triggered with the event. The event listener (= function) than does something. For example in the code you provided:

The rectangle is clicked ->
The function myDown is called ->
myDown repositions the rectangle to the center of the mouse and allows the rectangle to be dragged. Then it adds a event listener to the mouse movement (myMove) ->
Then the myMove moves the rectangle along with the mouse ->
If the mouse is up, the function myUp is called
myUp removes the mouse movement eventlistener (myMove) from the mouse movement event and stop the rectangle from being dragged

~G

Edited by Graphix because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.