JavaScript canvas, getting flat lines

Question

I'm working on project which have to draw graphs. Everything is quite good, but noticed one problem, the lines are showing strange.. it seems like someone draw my graph with brush holding horizontally.. when line goes down everything is OK, but when line is going horizontal the it becomes much smaller ... I can't find what's the problem could be.. Please help, because I started to get wrong graphs when it needs to draw horizontal line...

Here is the link to my project: http://www.unolita.lt/images/signalai/Documents/Koreliacine%20funkcija.html

You can clearly see my problem on 1st picture..

Here is it's code:

function drawSignal()
{   
    var canvas = document.getElementById("canvSignal"); 
    if (canvas.getContext) 
    {
        var ctx = canvas.getContext("2d");
            ctx.lineWidth = 3;  
     function Signalas()
        {
   <...>

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.strokeStyle = "black";

   <...>   

    y=250- Sn[n] ;
    ctx.lineTo(x, y);
    ctx.stroke(x, y);

   <...>

To put all code here was too much problematic..

Answer 1

This is due to the fact lines are drawn over all pixels they're over (on canvas positionning is in float). When you want to draw precise vertical or horizontal lines in javascript on a canvas, you'd better have them in half ints.

Possible Solution : If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.

So add 0.5 for odd numbered line width so that your points should be half numbered

ctx.lineTo(x+0.5, y+0.5);
ctx.stroke(x+0.5, y+0.5);

I have modified your code like this in line number 134 and 135 and got a output like this . Hope, this helps

Refer Here :

1. incorrect display lineWidth=1 at html5 canvas
2. HTML5 Canvas and Line Width
3. Line Width in Canvas