Drag and drop on canvas - function related query

mklein · 11-21-2010, 03:53 PM

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

Code:

<!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>

DrDOS · 11-21-2010, 05:24 PM

e === event

The following is a standard way of attaching events that's been used for years.

canvas.onmouseup = myUp;

var divx=document.getElementById("X");
divx.onclick = doThis;

If you added parenthesis it would call the function, which is not desired here.

TinyScript · 11-21-2010, 07:33 PM

Here's an example that works for IE and other browsers

http://jsdo.it/canvastag/gDaC

e is the var for the window.event
The window.event gets sent when you run functions like .onclick, .onmouse....etc

Code:

 //Global mouse object
                                       var Mouse={ x : 0,
                                                   y : 0
                                                  }
                  //Global mouse position 
document.onmousemove=function(e){ 
                                                          e = !e ? window.event : e ; 
                                           Mouse={ x : (e.pageX||e.clientX),
                                                   y : (e.pageY||e.clientY)
                                                  } 
             }