CODEWITHSUNDEEP
javascriptcanvas
Crocsx
Crocsx

Reputation: 7640

My canvas draw pixelated line

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

http://i.imgur.com/MVhHEru.png

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

Thanks for help.

Upvotes: 0

Views: 2221

Answers (1)

Crocsx
Crocsx

Reputation: 7640

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.

Upvotes: 4

Related Questions