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); }
you can see here the blue line is slightly coming out. does any one know why this happens?
Firgured it out, I was stupid to add ctx.moveTo(circlePoint.x, circlePoint.y);
I removed it and it fixed