Find the problem in the code.

[Real_nimr0d_3]

The program is here http://jsfiddle.net/x5xH5/18/

The aim is to change the color, circle size and width of line in each canvas when mouse is moved over them.

The first canvas works fine and if i scroll down to second canvas it works too but the third one doesn't, and weird thing the code doesn't work at all if I try to run it through a browser i.e., from html file.

so, can anyone spot the problem??

[Ciccioo]

it doesn't work in jsfiddle because you wrote

function changeWidth() {	ctx.fillStyle = "#FFFFFF";	ctx.fillRect(0,0, 400, 300);		width = Math.floor((Math.random()*50)+1);	ctx.lineWidth=width;	ctx.stroke();}

instead of

changeWidth = function() {	ctx.fillStyle = "#FFFFFF";	ctx.fillRect(0,0, 400, 300);		width = Math.floor((Math.random()*50)+1);	ctx.lineWidth=width;	ctx.stroke();}

the first code declares the function changeWidth, locally to the outer wrapper function (declaring functions one inside another is not the most clear behaviour to guess)

the second code declares a function, and assigns it to the variable (pointer to function) changeWidth. since changeWidth was never declared, it's global, so it can be accessed by the piece of code that triggers events (unlikely the first code)

 

and the reason why it doesn't work if you run it in a browser depends on how you ran it there

did you copy all the js, html and css? did you include jquery 1.11.0?

[Real_nimr0d_3]

it doesn't work in jsfiddle because you wrote

function changeWidth() {	ctx.fillStyle = "#FFFFFF";	ctx.fillRect(0,0, 400, 300);		width = Math.floor((Math.random()*50)+1);	ctx.lineWidth=width;	ctx.stroke();}

instead of

changeWidth = function() {	ctx.fillStyle = "#FFFFFF";	ctx.fillRect(0,0, 400, 300);		width = Math.floor((Math.random()*50)+1);	ctx.lineWidth=width;	ctx.stroke();}

the first code declares the function changeWidth, locally to the outer wrapper function (declaring functions one inside another is not the most clear behaviour to guess)

the second code declares a function, and assigns it to the variable (pointer to function) changeWidth. since changeWidth was never declared, it's global, so it can be accessed by the piece of code that triggers events (unlikely the first code)

 

and the reason why it doesn't work if you run it in a browser depends on how you ran it there

did you copy all the js, html and css? did you include jquery 1.11.0?

Update http://jsfiddle.net/x5xH5/20/ but still the same problem, the first canvas works fine in both jsfiddle and browser, the second canvas works in jsfiddle when scrolled down but doesn't in browser and no hope for the last one on both jsfiddle and browser. Yes I did include the query. I doubt it has something to do with scrolling?

[Ciccioo]

Update http://jsfiddle.net/x5xH5/20/ but still the same problem, the first canvas works fine in both jsfiddle and browser, the second canvas works in jsfiddle when scrolled down but doesn't in browser and no hope for the last one on both jsfiddle and browser. Yes I did include the query. I doubt it has something to do with scrolling?

"changewidth" instead of "changeWidth"

js is case sensitive

[Real_nimr0d_3]

"changewidth" instead of "changeWidth"

js is case sensitive

I know, I changed it right after I noticed and posted the link with 20 at the end but it still opens 19 one and you see w incase of "W" but still that's not the problem, it still won't work.

[Ciccioo]

I know, I changed it right after I noticed and posted the link with 20 at the end but it still opens 19 one and you see w incase of "W" but still that's not the problem, it still won't work.

it works

probably i see it working because i'm on a 720p screen, and you're an a 1080p or greater. i will explain this later on in the post, when talking about resizing the window. i have to scroll the page a lot to see the third canvas

 

 

the problem anyway is the way you detect the position of the mouse

in that context, the variables "x", "y", "w" and "h" don't have a really defined value

they just casually happen to be the x, y, h, w values for the first square, so only the first square works

they only work if you resize the browser window to be little enough to let you scroll the second and third canvas until they reach the top (relatively to the browser),  then they will work

 

edit again:

you're doing these calculations to check if the mouse were already on the canvas or not, but you may find it way easier to just change method: consider using "mouseover" instead of "mousemove"

the mouseover event only fires once, that is when the pointer enters the area of the canvas

var isInsideNow = (mx > x && mx < x + w && my > y && my <= y + h);

[Real_nimr0d_3]

it works

probably i see it working because i'm on a 720p screen, and you're an a 1080p or greater. i will explain this later on in the post, when talking about resizing the window. i have to scroll the page a lot to see the third canvas

 

 

the problem anyway is the way you detect the position of the mouse

in that context, the variables "x", "y", "w" and "h" don't have a really defined value

they just casually happen to be the x, y, h, w values for the first square, so only the first square works

they only work if you resize the browser window to be little enough to let you scroll the second and third canvas until they reach the top (relatively to the browser),  then they will work

Ok,so that explain why it's not working in the browser at all because in the browser the canvas are stacked horizontally to one another and position where mouseover is taking affect is in the left most canvas and they work in fiddle because in fiddle they are stacked vertically and if I scroll down the second canvas takes the place of the first canvas and it works but the last one doesn't because there's no more scroll. So, how do I solve this without needing a scrollbar?? 

var isInsideNow = (mx > x && mx < x + w && my > y && my <= y + h);

[Ciccioo]

Ok,so that explain why it's not working in the browser at all because in the browser the canvas are stacked horizontally to one another and position where mouseover is taking affect is in the left most canvas and they work in fiddle because in fiddle they are stacked vertically and if I scroll down the second canvas takes the place of the first canvas and it works but the last one doesn't because there's no more scroll. So, how do I solve this without needing a scrollbar?? 

i edited my previous post, give it a shot

[Real_nimr0d_3]

i edited my previous post, give it a shot

So, mouseover will trigger when the mouse is over the element and go back to its original state when mouse will move away, that's not what i'm going for.

[Ciccioo]

So, mouseover will trigger when the mouse is over the element and go back to its original state when mouse will move away, that's not what i'm going for.

mouseover triggers when the mouse goes over

when the mouse goes out, mouseout is triggered. if you don't handle it, nothing will happen

 

mouseover -----> changeWidth() ------> the line changes width

mouseout ------> nothing because you won't handle it ---------> the line doesn't change until a new mouseover is triggered

 

i think that's what you're looking for

 

otherwise, you will have to do fancy calculations

[Real_nimr0d_3]

mouseover triggers when the mouse goes over

when the mouse goes out, mouseout is triggered. if you don't handle it, nothing will happen

 

mouseover -----> changeWidth() ------> the line changes width

mouseout ------> nothing because you won't handle it ---------> the line doesn't change until a new mouseover is triggered

 

i think that's what you're looking for

 

otherwise, you will have to do fancy calculations

I can't understand how I wont need to specify location by x, y, w and h for mouseover to work?? Cause it will need to know when it needs to be triggered.

[Ciccioo]

I can't understand how I wont need to specify location by x, y, w and h for mouseover to work?? Cause it will need to know when it needs to be triggered.

what you have now is:

- mousemove = an event that triggers everytime the mouse moves of even a pixel over the canvas. so it keeps triggering

- your algorithm = something that tries to understand if the mouse was already on the canvas or if this is the moment when the mouse goes over the canvas for the first time, so that you can restrict the mousemove event calls from "every time the mouse moves" to "only when the mouse enters"

what you can use is:

- mouseover = an event that triggers when the mouse goes over the canvas for the first time, just once, so you won't need to filter anything, so you don't need the coordinates.

the event itself carries the information "which canvas fired the event" (you're using this information in the current algorithm too)

if you think about it, the solution you're using right now is actually the "hard to understand" one, i had to think about it to understand what you were doing, it's not even that clear to me yet

you don't need to check if the mouse is whithin the coordinates, because the event only fires when the mouse is on the canvas (so you can assume that it's whithin the coordinates)

[Real_nimr0d_3]

what you have now is:

- mousemove = an event that triggers everytime the mouse moves of even a pixel over the canvas. so it keeps triggering

- your algorithm = something that tries to understand if the mouse was already on the canvas or if this is the moment when the mouse goes over the canvas for the first time, so that you can restrict the mousemove event calls from "every time the mouse moves" to "only when the mouse enters"

what you can use is:

- mouseover = an event that triggers when the mouse goes over the canvas for the first time, just once, so you won't need to filter anything, so you don't need the coordinates.

the event itself carries the information "which canvas fired the event" (you're using this information in the current algorithm too)

if you think about it, the solution you're using right now is actually the "hard to understand" one, i had to think about it to understand what you were doing, it's not even that clear to me yet

you don't need to check if the mouse is whithin the coordinates, because the event only fires when the mouse is on the canvas (so you can assume that it's whithin the coordinates)

Forgot to reply, sry, I got it, you can check here http://jsfiddle.net/x5xH5/25/  Thanks a lot for your help, you  now represent the programming guru of linustechtips for me.

[Ciccioo]

Forgot to reply, sry, I got it, you can check here http://jsfiddle.net/x5xH5/25/ Thanks a lot for your help, you now represent the programming guru of linustechtips for me.

haha thanks, i'm happy i could help you