We Keep Coding

How to clear trails when drawing rectangles on an HMTL5 canvas

I am currently working on an application where I draw a rectangle on a canvas. I can draw the rectangle perfectly but then when I try to change the movement of the mouse to make the rectangle smaller there are trails that are left behind. How do I clear these trails when I make the rectangle's size smaller? below is my JavaScript code that I used. Thanks in advance.
function drawSquare() {
// creating a square
var w = lastX - startX;
var h = lastY - startY;
var offsetX = (w < 0) ? w : 0;
var offsetY = (h < 0) ? h : 0;
var width = Math.abs(w);
var height = Math.abs(h);
context.beginPath();
context.rect(startX + offsetX, startY + offsetY, width, height);
context.fillStyle = "gold";
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
canvas.style.cursor = "default";
}
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.pageX - canvas.offsetLeft,
y: e.pageY - canvas.offsetTop,
};
}
function handleMouseDown(e) {
// get mouse coordinates
mouseX = parseInt(e.pageX - offsetX);
mouseY = parseInt(e.pageY - offsetY);
// set the starting drag position
lastX = mouseX;
lastY = mouseY;
isDown = true;
if (isChecBoxClicked == true) {
mouseIsDown = 1;
startX = lastX;
startY = lastY;
var pos = getMousePos(canvas, e);
startX = lastX = pos.x;
startY = lastY = pos.y;
drawSquare();
}
else {
canvas.style.cursor = "default";
}
}
function handleMouseUp(e) {
// clear the dragging flag
isDown = false;
canvas.style.cursor = "default";
// get mouse coordinates
mouseX = parseInt(e.pageX - offsetX);
mouseY = parseInt(e.pageY - offsetY);
// set the starting drag position
lastX = mouseX;
lastY = mouseY;
if (isChecBoxClicked == true)
{
canvas.style.cursor = "crosshair";
if (mouseIsDown !== 0) {
mouseIsDown = 0;
var pos = getMousePos(canvas, e);
lastX = pos.x;
lastY = pos.y;
drawSquare();
}
}
}
function handleMouseMove(e) {
// if we're not dragging, exit
if (!isDown) {
return;
}
//if (defaultval == 1) {
// return;
//}
if (isChecBoxClicked == true) {
canvas.style.cursor = "crosshair";
if (mouseIsDown !== 0) {
var pos = getMousePos(canvas, e);
lastX = pos.x;
lastY = pos.y;
drawSquare();
}
}
}

A canvas doesn't clear itself. At least not a 2D context, like you are using. If you keep drawing on it, the new graphics is placed on top of the old. You need to explicitly clear it:
context.clearRect(0, 0, canvas.width, canvas.height);

You will probably have to clear your canvas. If you are only drawing a square you will have to do that in the drawSquare function. If you are drawing multiple things you will have to do it in a higher function that redraws multiple things.
For clearing the whole canvas, you can use the following code:
context.clearRect ( 0 , 0 , canvas.width, canvas.height );
There are also a lot of canvas libraries that will manage this for you and optimize the areas redrawn (they might only clear a part of the canvas, so there are less pixels redrawn)

Show mousex and mousey position using JavaScript not working

HTML and JavaScript code are shown below and I have checked it in mozila and chrome and it's not working.
This is the HTML part
<form name ="show">
<input type="text" name="mouseXField" >Mouse X Position<br />
<input type="text" name="mouseYField" >Mouse Y Position<br />
</form>
This is javascript part
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!mie) {
document.captureEvent(Event.MOUSEMOVE);
document.captureEvent(Event.MOUSEDOWN);
}
document.onmousemove = mousePos();
document.onmousedown = mouseClicked();
var mouseClick=0;
var keyClicked=0;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!mie) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
document.show.mouseXField.value = mouseX;
document.show.mouseYField.value = mouseY;
return true;
}

Here is a solution with jquery : fiddle
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
tempX = e.pageX
tempY = e.pageY
}
$('#spnCursor').html("x: " + tempX+" y: "+ tempY);
return true
}

Where is the event variable referenced in your else block declared?
Could you also post the html?
A quick google revealed a few jsfiddle pages which achieve what you're after.

Passing variables in event listener not working

I have a simple event listener and I am trying to pass variables to a function but it's not working... this is what I have:
window.onload = function () {
document.getElementById('cursor').addEventListener("mousedown", mousePos, false);
}
function mousePos(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", function () {
mousemoveCalc(x, y);
}, false);
}
function mousemoveCalc(e, x, y) {
console.log(e);
console.log(x); //undefined
console.log(y); //undefined
}
I'm getting undefined for x and y but I do not know how to solve it =/ They are not undefined however in mousePos =/
How do i fix this ?

See this fiddle to see if this is close to what you are looking for.
http://jsfiddle.net/cF6fE/2/
var posx = 0;
var posy = 0;
window.onload = function() {
document.getElementById('cursor').addEventListener("mousedown", mousePos, false);
}
function mousePos(e) {
posx = e.clientX;
posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", mousemoveCalc);
}
function mousemoveCalc(e) {
console.log(e);
var x = e.clientX;
var y = e.clientY;
var xOffset = posx-x;
var yOffset = posy-y;
console.log(x);
console.log(y);
console.log(xOffset);
console.log(yOffset);
}
Update:- with Function.bind
http://jsfiddle.net/uGuHk/
function mousePos(e) {
var posx = e.clientX;
var posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", mousemoveCalc.bind(this, posx,posy));
}
function mousemoveCalc(xax,yax,e) {
console.log(e);
var x = e.clientX;
var y = e.clientY;
var xOffset = xax-x;
var yOffset = yax-y;
console.log(x); //undefined
console.log(y); //undefined
console.log(xOffset); //undefined
console.log(yOffset); //undefined
}
Update2:- With Closure
http://jsfiddle.net/FG6uW/
function mousePos(e) {
var posx = e.clientX;
var posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", function() {
(function(x, y) {
mousemoveCalc(x, y)
})(posx, posy)
});
}
function mousemoveCalc(xax, yax) {
var x = event.clientX;
var y = event.clientY;
var xOffset = xax - x;
var yOffset = yax - y;
console.log(xax);
console.log(yax);
document.getElementById('cursor').innerText = xax + '-' + yax + '|' + xOffset + '-' + yOffset;
console.log(xOffset);
console.log(yOffset);
}

Custom div draggable function - window boundaries?

I am using the following function to drag a div by a handle:
function enableDragging(ele) {
var dragging = dragging || false,
x, y, Ox, Oy,
current;
enableDragging.z = enableDragging.z || 1;
var grabber = document.getElementById("wrapId");
grabber.onmousedown = function (ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
current = target.parentNode;
dragging = true;
x = ev.clientX;
y = ev.clientY;
Ox = current.offsetLeft;
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z;
document.onmousemove = function (ev) {
ev = ev || window.event;
pauseEvent(ev);
if (dragging == true) {
var Sx = ev.clientX - x + Ox,
Sy = ev.clientY - y + Oy;
current.style.left = Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)) + "px";
current.style.top = Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)) + "px";
document.body.focus();
document.onselectstart = function () {
return false;
};
ev.ondragstart = function () {
return false;
};
document.body.style.MozUserSelect = "none";
document.body.style.cursor = "default";
return false;
}
}
document.ondragstart = function () {
return false;
}
document.onmouseup = function (ev) {
ev = ev || window.event;
dragging && (dragging = false);
if (ev.preventDefault) {
ev.preventDefault();
} else {
e.cancelBubble = true;
e.returnValue = false;
}
document.body.style.MozUserSelect = "text";
document.body.style.cursor = "default";
//toggleEnableSelectStart(true);
return false;
}
};
}
I am trying to set boundaries to that the div cannot be dragged outside of the bounds of the actual browser window.
The above function accomplished 50% of this, it wont let the user drag the div outside of the top left and left bounds. However it left the user drag it outside bottom and right..
Any ideas how to fix this?

Take the minimum between the value you had calculated with the width/ height boundaries of the window minus the width of/height of the div:
current.style.left = Math.min(Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)), document.body.offsetWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)), document.body.offsetHeight - current.offsetHeight) + "px";
edit:
Something along these lines (mind, this is quickly written, not in the same format as yours!)
http://jsfiddle.net/WKLa7/1/

Can't run onmousemove when mouse move in div tag using javascript?

I have a sample code:
javascript:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
}
function positionButton(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
In html:
<div id="button" style="position: absolute; opacity: 1; z-index: 100; width:27px; height:20px; overflow:hidden">
test test
</div>
<script type="text/javascript" src="script.js"></script>
<script>
var bootstrap = new bootstrap('button');
bootstrap.init();
</script>
When I run code, result not run event mousemove, how to fix it?

The style of the button.
Your code:
width:27px;height:20px;
I change to
width:60px;height:50px;
I try it on IE9.It works.

Run this jsFiddle that I created with a slight modification of your code:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
};
function positionButton(e) {
e = e || window.event;
var cursor = {
x: 0,
y: 0
};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
var bootstrap = new bootstrap('button');
bootstrap.init();​
It works correctly with Chrome, Safari and FFX.
Have you any error in your browser console?
Is script.js correctly downloaded?
What browser are you using?