canvas after arc stroke line popping out

I am working with Canvas and when I draw stoke like around an arc I am seeing with stroke line coming out:

Render circle function:

function renderCircle(radius, angle, circleLength, circleAngle, circleColor, circleBorderColor, circleTextColor, circleFontStyle, value) { var text = "$" + (typeof value === "number" ? value : this.data.value);         var coord = this.getCoordOnCircle(radius * 1.21, angle);         var circlePoint = {             x: this.gaugeCenterX - coord.x,             y: this.gaugeCenterY - coord.y         };         var ctx = this.ctx;         ctx.fillStyle = circleColor;         ctx.beginPath();         ctx.moveTo(circlePoint.x, circlePoint.y);         coord = this.getCoordOnCircle(circleLength * 1.18, angle - circleAngle);         ctx.arc((circlePoint.x + coord.x), (circlePoint.y + coord.y), circleLength, 0, 25 * Math.PI);         ctx.strokeStyle = circleBorderColor;         if(this.isAnimationEnabled) {          ctx.lineWidth = 2;         }          ctx.stroke();         ctx.closePath();         ctx.fill();         ctx.fillStyle = circleTextColor;         ctx.textAlign = 'center';         ctx.font = circleFontStyle;         ctx.fillText(text, (circlePoint.x + coord.x), (circlePoint.y + coord.y) + 5); } 

enter image description here

you can see here the blue line is slightly coming out. does any one know why this happens?

Add Comment
1 Answer(s)

Firgured it out, I was stupid to add ctx.moveTo(circlePoint.x, circlePoint.y);

I removed it and it fixed

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.