How to smooth out edges of circles drawn in canvas with arc?

html, html5-canvas, javascript

Solution

You are drawing strokes multiple times so they are drawing over one another. You need to clear the area where the old arc stroke was and then draw the new one

context.clearRect(x - radius - context.lineWidth, 
                  y - radius - context.lineWidth, 
                  radius * 2 + (context.lineWidth*2), 
                  radius * 2 + (context.lineWidth*2));
context.beginPath();
context.arc(x, y, radius, offset, ((circ) * current) + offset , false);
context.stroke();
context.closePath();

JSFiddle

Problem

I am drawing circles in a html5 canvas using arc but the edges are rough and not smooth. I am looking to smooth them out. Stacked overflow requires me to write more so my code to text ratio is better Code ``` (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; }()); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); createCircle(100, 150, '85', '675'); createCircle(300, 150, '70', '479'); createCircle(500, 150, '91', '715'); createCircle(700, 150, '58', '334'); function createCircle(x, y, temp, hash, callback) { var radius = 75; var endPercent = parseInt(temp, 10); var curPerc = 0; var counterClockwise = false; var circ = Math.PI * 2; var quart = Math.PI / 2; context.strokeStyle ='#006600'; context.lineWidth = 10; context.lineCap = "round"; var offset = quart; function doText(context, x, y, temp, hash) { context.lineWidth = 10; if(parseInt(temp, 10) > 90) context.fillStyle = '#ad2323'; else if(parseInt(temp, 10) > 82) context.fillStyle = '#ffcc33'; else context.fillStyle = '#006600'; context.font = "28px sans-serif"; context.fillText(temp + 'º', x - 20, y + 10); context.fillText(hash + 'KH/s', x - 50, y - 90); } function animate(current) { context.lineWidth = 10; if(curPerc > 89) context.strokeStyle = '#ad2323'; else if(curPerc > 81) context.strokeStyle = '#ffcc33'; context.beginPath(); context.arc(x, y, radius, offset, ((circ) * current) + offset , false); context.stroke(); context.closePath(); curPerc++; if (curPerc < endPercent) { requestAnimationFrame(function () { animate(curPerc / 100); }); } else { doText(context, x, y, temp, hash); if (callback) callback.call(); } } animate(); } ``` JSFiddle = http://jsfiddle.net/uhVj6/712/

Original source