CODEWITHSUNDEEP
javascriptcanvas
Mike Rifgin
Mike Rifgin

Reputation: 10745

Canvas jagged line issue

I've built a very simple line graph using canvas (pulling in data from google analytics). I'm having a few small issues. First off, the plot line is jagged:

http://jsfiddle.net/uJQ7K/

I'm just using lineTo for this:

ctx.lineTo((i*cellWidth) + cellWidth + padding,(tableHeight + padding) - data[i].v);

I've read that using splines can fix this but surely there's a way to draw a straight line out of the box?

Other problems I'm having are changing one attribute like strokeStyle changes all the strokes on a page. How do I just change the stroke of the plot line and not affect the appearance of the grid?

Upvotes: 2

Views: 1756

Answers (1)

Drew Dahlman
Drew Dahlman

Reputation: 4972

Have you tried changing your line cap?

cxt.lineCap = 'round';

EDIT -

By adding ctx.beginPath(); before your ctx.lineCap you will get a better result - 

ctx.beginPath();
ctx.lineCap = 'round';

http://jsfiddle.net/uJQ7K/1/

Upvotes: 5

Related Questions