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; 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>