circle progressbar doesn't start from the middle

Question

I have a circular progress bar that must start from 0 degree - middle of a top part of the circle. But I've noticed that it starts not in the middle, but a little to the left. How do I fix that? Here's the code:

var bar = document.getElementById('progressbar'),
  createProgressBar = function(bar) {
    var options = {
        start: 0,
        width: bar.getAttribute('data-width'),
        height: bar.getAttribute('data-height'),
        percent: 90,
        lineWidth: bar.getAttribute('data-linewidth')
      },
      canvas = document.createElement('canvas'),
      paper = canvas.getContext('2d'),
      span = document.createElement('span'),
      radius = (options.width - options.lineWidth) / 2,
      color = paper.createLinearGradient(0, 0, options.width, 0),
      step = 1.5;

    span.style.width = bar.style.width = options.width + 'px';
    span.style.height = bar.style.height = options.height + 'px';
    canvas.width = options.width;
    canvas.height = options.height;
    span.style.lineHeight = options.height + 'px';

    color.addColorStop(0, "red");
    color.addColorStop(0.5, "red");
    color.addColorStop(1.0, "red");

    bar.appendChild(span);
    bar.appendChild(canvas);

    (function animat() {
      span.textContent = options.start + '%';
      createCircle(options, paper, radius, color, Math.PI * 1.5, Math.PI * step);
      console.log(step);
      options.start++;
      step += 0.02;
      if (options.start <= options.percent) {
        setTimeout(animat, 10);
      }
    })();
  },

  createCircle = function(options, paper, radius, color, start, end) {
    paper.clearRect(
      options.width / 2 - radius - options.lineWidth,
      options.height / 2 - radius - options.lineWidth,
      radius * 2 + (options.lineWidth * 2),
      radius * 2 + (options.lineWidth * 2)
    );

    paper.beginPath();
    paper.arc(options.width / 2, options.height / 2, radius, 0, Math.PI * 2, false);
    paper.strokeStyle = '#dbd7d2';
    paper.lineCap = 'round';
    paper.lineWidth = options.lineWidth;
    paper.stroke();
    paper.closePath();

    paper.beginPath();
    paper.arc(options.width / 2, options.height / 2, radius, start, end, false);
    paper.strokeStyle = color;
    paper.lineCap = 'square';
    paper.lineWidth = options.lineWidth;
    paper.stroke();
    paper.closePath();
  };

createProgressBar(bar);

#progressbar {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}

canvas {
  position: absolute;
  display: block;
  left: 0;
  top: 0
}

span {
  display: block;
  color: #222;
  text-align: center;
  font-family: "sans serif", tahoma, Verdana, helvetica;
  font-size: 30px
}

<div id="progressbar" data-width="320" data-height="320" data-linewidth="16"></div>

That's what the progress bar looks like: https://jsfiddle.net/ue20b8bd/

P.S. I've modified the code from github: https://github.com/su-ning/html5-circle-progressbar

Answer 1

The problem was with the lineCap property. Using 'butt' as a lineCap fixed the problem!