My canvas draw pixelated line

Question

I'm trying to draw a little chart using some JavaScript and the canvas.

I'm doing a stuff like that :

RadarChart.prototype.fillRadar = function () {
var nbLabel = this.data.labels.length;
this.context.save();
this.context.lineWidth = 0.5;
this.context.lineJoin = "round";
this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
this.context.strokeStyle = this.data.lineColor;
for (var i = 0; i < nbLabel; i++) {
    this.context.moveTo(0, 0);
    this.context.lineTo(0, -((this.canvas.height / 2) - 30))
    this.context.stroke();
    this.context.rotate((Math.PI / 180) * (360 / nbLabel));
}
this.context.restore();
}

the problem is that my lines are so pixelated and are not perfect. their width seems to change. It's like it's fading out over time...

Why is it doing that? How can I fix it?

Thanks for help.

Why do you use `rotate` method? Why not calculate all end points and draw lines (rays) directly? — hindmost, Aug 17 '15 at 13:46
If you zoom in 4x on any bitmap image its going to be pixelated. Canvas is not SVG. — ericjbasti, Aug 17 '15 at 13:49
@hindmost booth are options, i find rotating easier. I do'nt think the problem come from here, but if it's one of the reason i can change ^^ — Bobby, Aug 17 '15 at 13:56
I get that. I'm thinking you're expectations may be unrealistic for how canvas draws lines. It's hard to tell without seeing a live example. The only time I've had an issue with pixelation (that wasn't expected) was from drawing a line without clearing the canvas first. If you draw a line in the same location without clearing it will get super pixelated after a couple draws (but that goes for everything). — ericjbasti, Aug 17 '15 at 13:58
I draw only one time. I will do a little fiddle to show you. — Bobby, Aug 17 '15 at 14:00
Well you can always up the DPI of the canvas and see if that helps you. I gave an example for how to do that here: http://stackoverflow.com/questions/24395076/canvas-generated-by-canvg-is-blurry-on-retina-screen/24399725#24399725 Hope that helps. — ericjbasti, Aug 17 '15 at 14:08

score 5 · Accepted Answer · answered Aug 17 '15 at 14:22

5

Don't set the width / height of the canvas using css

use canvas.width = 500; canvas.height = 500;

make a function that find out how much 20% of the screen represent in pixel and then set the width/height in the code.

answered Aug 17 '15 at 14:22

Crocsx

2,534
1
28
50

My canvas draw pixelated line

1 Answers1