title: Canvas arc on Retina is too sharp at some points
body: <p>I am trying to create animated arc that doesn't look blurry on HiDPI devices.</p>
  
  <p>This is how my arc looks on iPhone 5s:</p>
  
  <p><a href="https://i.stack.imgur.com/68Zu5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/68Zu5.png" alt="canvas arc"></a></p>
  
  <p>you can see that near 0, 90, 180 deg arc becomes too sharp. How can I prevent this?</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Canvas arc progress
  const can = document.getElementById('canvas');
  const ctx = can.getContext('2d');
  const circ = Math.PI * 2;
  const quart = Math.PI / 2;
  const canvasSize = can.offsetWidth;
  const halfCanvasSize = canvasSize / 2;
  
  let start = 0,
    finish = 70,
    animRequestId = null;
  
  // Get pixel ratio
  const ratio = (function() {
    const dpr = window.devicePixelRatio || 1,
      bsr = ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio || 1;
  
    return dpr / bsr;
  })();
  
  // Set canvas h &amp; w
  can.width = can.height = canvasSize * ratio;
  can.style.width = can.style.height = canvasSize + 'px';
  ctx.scale(ratio, ratio)
  
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(120,159,194)';
  ctx.lineCap = 'square';
  ctx.lineWidth = 8.0;
  ctx.arc(halfCanvasSize, halfCanvasSize, halfCanvasSize - 4, 0, circ, false);
  ctx.stroke();
  ctx.closePath();
  
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(244,247,255)';
  ctx.lineCap = 'round';
  ctx.lineWidth = 8.0;
  ctx.closePath();
  
  let imd = ctx.getImageData(0, 0, canvasSize, canvasSize);
  
  const draw = (current) =&gt; {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(halfCanvasSize, halfCanvasSize, halfCanvasSize - 4, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
  };
  
  (function animateArcProgress() {
    animRequestId = requestAnimationFrame(animateArcProgress);
  
    if (start &lt;= finish) {
      draw(start / 100);
      start += 2;
    } else {
      cancelAnimationFrame(animRequestId);
    }
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    widht: 300px;
    background: #85b1d7;
  }
  canvas {
    height: 250px;
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;canvas id='canvas'&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>