How do I fix blurry progress bar in my HTML5 canvas?

Question

I am a total n00b with HTML5 and am working with the canvas to dynamic progress bar.This works really nicely, except that my progress is rendered very fuzzy/blurry/stretched.

The relevant code

function loadProgressbar() {
  var datasize = window.innerWidth / 11.2297;
  var el = document.getElementById('graph'); // get canvas
  el.style.width = datasize;
  el.style.height = datasize;
  el.style.marginTop = window.innerWidth / 17.075;
  el.style.marginLeft = window.innerWidth / 17.075;
  el.style.position = 'relative';

  var options = {
    percent: el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || datasize,
    lineWidth: el.getAttribute('data-line') || window.innerWidth / 111.0667,
    rotate: el.getAttribute('data-rotate') || 0
  }

  var canvas = document.createElement('canvas');
  canvas.style.display = 'block';
  canvas.style.position = 'absolute';
  canvas.style.top = '0';
  canvas.style.left = '0';

  var span = document.createElement('span');
  span.style.lineHeight = datasize + 'px';
  span.style.fontSize = window.innerWidth / 24.15 + 'px';
  span.style.display = 'block';
  span.style.fontFamily = 'sans-serif';
  span.style.textAlign = 'center';

  var ctx = canvas.getContext('2d');
  canvas.width = canvas.height = options.size;

  el.appendChild(span);
  el.appendChild(canvas);

  ctx.translate(options.size / 2, options.size / 2); // change center
  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

  var radius = (options.size - options.lineWidth) / 2;

  var drawCircle = function(options_percent, lineWidth, i) {
    percent = i / 100;
    percent = Math.min(Math.max(0, percent || 1), 1);
    ctx.beginPath();

    var grd = ctx.createLinearGradient(0, 0, 120, 120);
    grd.addColorStop(0, '#509e25');
    grd.addColorStop(1, '#dbfda1');

    if (options_percent == '#c2c2c2') {
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = '#c2c2c2';
    } else {
      ctx.arc(0, 0, radius, i * 0.03, Math.PI * 2 * percent, false);
      ctx.strokeStyle = grd;
    }

    ctx.lineCap = 'round';
    ctx.lineWidth = lineWidth;
    ctx.stroke();
  };

  drawCircle('#c2c2c2', options.lineWidth, 100);
  window.onresize = function(e) {
    document.getElementById('graph').innerHTML = "";
    loadProgressbar();
  };

  var i = 0;
  var handle = setInterval(function() {
    span.textContent = i;
    i++;
    if (i > options.percent) {
      clearInterval(handle);
      return;
    }
    drawCircle(options.percent, options.lineWidth, i);
  }, 60);
}

window.onload = loadProgressbar;

<div id="graph" data-percent="75"></div>

Progress bar Image

What am I doing incorrectly? please help....

Answer 1

To prevent the over-writing that causes blurriness you must

• Clear the canvas when you advance your indicator: context.clearRect(0,0,canvas.width,canvas.height)
• Always begin separate paths with context.beginPath or you will also get over-writing and blurriness.
• Don't style the canvas element with CSS. That will alter the canvas' pixel ratio and cause distortion. Instead resize the canvas element itself: canvas.width=100; canvas.height=100;

Here's an example of a circular progress indicator:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var r=80;
var min=-PI/2;
var max=min+PI2;
var percent=33;

ctx.lineCap='round';
ctx.font='24px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle='gray';

$myslider=$('#myslider');
$myslider.attr({min:0,max:100}).val(33);
$myslider.on('input change',function(){
  percent=parseInt($(this).val());
  drawGuage(percent);
});

drawGuage(percent);

function drawGuage(percent){
  ctx.clearRect(0,0,cw,ch);
  // draw full guage outline
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,PI2);
  ctx.strokeStyle='lightgray';
  ctx.lineWidth=15;
  ctx.stroke();
  // draw percent indicator
  ctx.beginPath();
  ctx.arc(cx,cy,r,min,min+(max-min)*percent/100);
  ctx.strokeStyle='green';
  ctx.lineWidth=6;
  ctx.stroke();
  ctx.fillText(percent+'%',cx,cy);
}

#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move slider to change guage percentage</h4>
<input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>