onmousemove and onmousedown

[Munchor]

I have this function, that's called by onmousemove="checkmouse(event)"; in body.

Code: Select All | Copy To Clipboard

1 2 3 4 5 6 7

function checkmouse(event) {   var x = event.clientX - drawingCanvas.offsetLeft;   var y = event.clientY - drawingCanvas.offsetTop;   context.fillRect(x, y, 5, 5); }

I was wondering how I can check if the mouse is both moving and down. I can do them separately (onmousemove or onmousedown), but not together. Do you have any ideas? Thanks.

[Ikkerens]

You could try defining both window.onmousedown and and then defining window.onmousemove as well.

[Munchor]

You could try defining both window.onmousedown and and then defining window.onmousemove as well.

Code: Select All | Copy To Clipboard

1 2 3 4 5 6 7 8 9 10 11 12

function checkmouse(event) {   window.onmousedown = mousedown;   function mousedown()   {     var x = event.clientX - drawingCanvas.offsetLeft;     var y = event.clientY - drawingCanvas.offsetTop;     context.fillRect(x, y, 5, 5);   } }

I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.

There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.

[Deep Thought]

Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.

[Munchor]

Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.

Yes, but when do I check if it's up or down?

[Ikkerens]

Yes, but when do I check if it's up or down?

window.onmousemove

[Munchor]

Yes, but when do I check if it's up or down?

window.onmousemove

You could try defining both window.onmousedown and and then defining window.onmousemove as well.

Code: Select All | Copy To Clipboard

1 2 3 4 5 6 7 8 9 10 11 12

function checkmouse(event) {   window.onmousedown = mousedown;   function mousedown()   {     var x = event.clientX - drawingCanvas.offsetLeft;     var y = event.clientY - drawingCanvas.offsetTop;     context.fillRect(x, y, 5, 5);   } }

I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.

There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.

[Ikkerens]

Are you even returning false then?
When overriding an user event you need to return false to "cancel" the original effect, try that

[Munchor]

Code: Select All | Copy To Clipboard

1 2 3 4 5 6 7 8 9 10 11 12 13

function checkmouse(event) {   window.onmousedown = mousedown;   function mousedown()   {     var x = event.clientX - drawingCanvas.offsetLeft;     var y = event.clientY - drawingCanvas.offsetTop;     context.fillRect(x, y, 5, 5);     return false;   } }

I tried that, I didn't know I had to return false; in order to cancel events when overriding them. However, this didn't work. Thanks!

[Ikkerens]

Are you returning false on onmousemove? Cause I don't see mousemove in your code
Edit: So I've been trying to create what you were making, and came with this:
(It's not using canvas like you, but it should give you the general idea)

Moved here: http://www.omnimaga.org/index.php?topic=10744

[Munchor]

Code: Select All | Copy To Clipboard

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

var drawingCanvas = document.getElementById('mycanvas'); if (drawingCanvas.getContext) {   var context = drawingCanvas.getContext('2d'); } function main() {   } function checkmouse(event) {   window.onmousedown = mousedown;   window.onmousemove = mousemove;   function mousemove()   {     return false;   }   function mousedown()   {     var x = event.clientX - drawingCanvas.offsetLeft;     var y = event.clientY - drawingCanvas.offsetTop;     context.fillRect(x, y, 5, 5);   } }

I am now returning false on mouse move, but it still doesn't work smoothly. I will check your link right away.