CODEWITHSUNDEEP
htmlhtml5-canvas
Aiden
Aiden

Reputation: 399

Why does the color of my lines gradually change in html 5 canvas?

I was wondering why the vertical lines(strokes) are slowing changing color almost like they are being gradiented towards the end

Below is an example of what i mean, this is using HTML5 Canvas

http://jsfiddle.net/YyhxV/

Thanks for your help

Aiden

Upvotes: 1

Views: 194

Answers (1)

user1693593
user1693593

Reputation:

The problem with the code is that you stroke each time you add a line to the path.

Your line is a bit thin. Values below 1 are valid however - this will activate sub-pixeling (as does non-integer co-ordinates).

The fading is a result of the previous lines being drawn on top of each other. As they are sub-pixel'ed it will give the "fading" effect as the older lines have more "mixed" information than the newer lines which makes them "stronger" in appearance.

Try this modification: (http://jsfiddle.net/YyhxV/2/)

//...
context.lineWidth= 0.2; //0.1 is a bit too thin, try cranking it up a bit
//...
for(var interval = 0; interval < 24; interval++)
{
    context.moveTo(interval*spacing+0.5,50);
    context.lineTo(interval*spacing+0.5,42); 
}

//move stroke outside
context.stroke();

Upvotes: 1

Related Questions