1

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..

Denisas Timofijuk
  • 19
  • 6

1 Answers1

0

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

enter image description here

Refer Here :

  1. incorrect display lineWidth=1 at html5 canvas
  2. HTML5 Canvas and Line Width
  3. Line Width in Canvas
Community
  • 1
  • 1
Prasath K
  • 4,950
  • 7
  • 23
  • 35
  • Yes it is better now, but there appears empty spaces.. you can see it in this picture too... how can I get a perfect line with no breaks? – Denisas Timofijuk May 27 '13 at 09:37
  • You only know about your code . I just said the reason . My sol : Just check your x and y value before drawing and add 0.5 if it is not a half numbered .. Everywhere it should be half numbered if line width is odd one .. – Prasath K May 27 '13 at 09:40