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

i wondering why vertical lines(strokes) slowing changing color being gradiented towards end

below example of mean, using html5 canvas

http://jsfiddle.net/yyhxv/

thanks help

aiden

the problem code stroke each time add line path.

your line bit thin. values below 1 valid - activate sub-pixeling (as non-integer co-ordinates).

the fading result of previous lines being drawn on top of each other. sub-pixel'ed give "fading" effect older lines have more "mixed" information newer lines makes them "stronger" in appearance.

try modification: (http://jsfiddle.net/yyhxv/2/)

//... context.linewidth= 0.2; //0.1 bit thin, try cranking 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();