Check the code pls

[Real_nimr0d_3]

Here's the code http://jsfiddle.net/x5xH5/2/

Some unknown reason the line of the width doesn't change after Math.Random hits it's highest value.

You have to move the mouse over the line to understand what i'm saying here.

[Paralectic]

I don't know it myself, you're better off asking this on Stackoverflow.

[Adnanklink]

I don't know it myself, you're better off asking this on Stackoverflow.

Im pretty sure that there are a lot of coders on this forum (me included). Dont turn people down that fast!

[Paralectic]

Im pretty sure that there are a lot of coders on this forum (me included). Dont turn people down that fast!

Just saying, not meant negative in any way.

That website is just useful and they answer quickly ( according to my own experiences there )

[Adnanklink]

Just saying, not meant negative in any way.

That website is just useful and they answer quickly ( according to my own experiences there )

lol gotcha, I took it personally. Sorry about that

[Ciccioo]

this happens because you never clear the canvas: the html5 canvas is like drawing on paint, you always add stuff, and once you put it there there is no way you can change it, or move a single object, or change the size of something

 

so basically you draw a line everytime, but you just draw it over the last one. the result is that you see a change only if the new line is bigger than the last one, otherwise you will draw a thin black line over the old big one, and clearly you won't be able to see any difference

 

the solution is to clear the canvas before you draw the new line

 

you can do this in many ways:

• draw a big white line over the old black one
• use the context.clearRect(x, y, width, height) method to clear the area you want
• use the "canvas.width=canvas.width;" "hack" to just erase everything

the first method should be the most efficient, the second is the most widely used, the third is just there fyi

 

edit:

the way you draw on canvas is actually even a bit more different, as it should look something like this

// clear the canvas, just in case you need itcontext.clearRect(0, 0, canvas.width, canvas.height);// tell the canvas that you're starting to draw something newcontext.beginPath();// define something fancy, by adding its points to the current path (nothing is drawn yet)context.lineTo(fancyCoordinateX, fancyCoordinateY);context.lineTo(......);context.lineTo(......);context.lineTo(......);context.lineTo(......);context.lineTo(......);//declare that the path is closed, joining the last point in the path to the first point using a straight linecontext.closePath();// define the styles you want to draw this path withcontext.strokeStyle = "your stroke style";context.fillStyle = "your fill style";// stroke or fill all the shapes in the current path using the values that in this moment are assigned to the strokeStyle and fillStyle attributes// if closePath() wasn't called, those methods will do it theirselves (so closePath() is actually not required)context.stroke();context.fill();

[Adnanklink]

It seems to run as it is supposed to. I don't see the problem. Your math.random max value is 50 from the range (1, 50] and width updates.

 

Update: Ah, I misinterpreted the problem, @Ciccioo is spot on with this one.

[Ciccioo]

It seems to run as it is supposed to. I dont see the problem. Your math.random max value is 50 from the range (1, 50] and width updates.

his problem is that the line never gets thinner

everytime you go over it with the mouse, the size should change (to the bigger or to the thinner)

[Adnanklink]

his problem is that the line never gets thinner

everytime you go over it with the mouse, the size should change (to the bigger or to the thinner)

updated my last post

[Adnanklink]

I think you can clear a part of the canvas with context.clearRect(x,y,w,h) or something like that. Just put in the the variables and it will clear that spot before redrawing.

 

Edit: lol, @Ciccioo already had this solution in his post. I skim too much.

[Ciccioo]

Edit: lol, @Ciccioo already had this solution in his post. I skim too much.

sit back, take a deep breath

you need to throttle a bit, you're starting to show artifacts

[WanderingFool]

I don't know it myself, you're better off asking this on Stackoverflow.

In general this statement isn't very helpful to the community though, is it?  While I have nothing wrong with recommending stackoverflow, it does not mean just because you couldn't answer the question quickly that others on might not.  While if speed is important, then at least word it something like "You might consider also posting on stackoverflow, just to get more people looking at the code"....or at least delaying it a bit to see if there are users on who could answer it quickly....like in this case Ciccioo solved it in less than 15 minutes

 

On that note, I find that Linus Tech Tips usually offers a more comprehensive answer...where the answer tries to teach the basics that surround the problem

 

Anyways @Real_nimr0d_3; @Ciccioo gave the best explanation

[Real_nimr0d_3]

 

this happens because you never clear the canvas: the html5 canvas is like drawing on paint, you always add stuff, and once you put it there there is no way you can change it, or move a single object, or change the size of something

 

so basically you draw a line everytime, but you just draw it over the last one. the result is that you see a change only if the new line is bigger than the last one, otherwise you will draw a thin black line over the old big one, and clearly you won't be able to see any difference

 

the solution is to clear the canvas before you draw the new line

 

you can do this in many ways:

• draw a big white line over the old black one
• use the context.clearRect(x, y, width, height) method to clear the area you want
• use the "canvas.width=canvas.width;" "hack" to just erase everything

the first method should be the most efficient, the second is the most widely used, the third is just there fyi

 

edit:

the way you draw on canvas is actually even a bit more different, as it should look something like this

// clear the canvas, just in case you need itcontext.clearRect(0, 0, canvas.width, canvas.height);// tell the canvas that you're starting to draw something newcontext.beginPath();// define something fancy, by adding its points to the current path (nothing is drawn yet)context.lineTo(fancyCoordinateX, fancyCoordinateY);context.lineTo(......);context.lineTo(......);context.lineTo(......);context.lineTo(......);context.lineTo(......);//declare that the path is closed, joining the last point in the path to the first point using a straight linecontext.closePath();// define the styles you want to draw this path withcontext.strokeStyle = "your stroke style";context.fillStyle = "your fill style";// stroke or fill all the shapes in the current path using the values that in this moment are assigned to the strokeStyle and fillStyle attributes// if closePath() wasn't called, those methods will do it theirselves (so closePath() is actually not required)context.stroke();context.fill();

Thanks man, never really thought about that silly thing. It works now.