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 = /

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/uhVj6/712/

• javascript
• html
• html5-canvas

1 Answer 1

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