title: canvas arc function flicker when set shadow and gradient in safari
body: <p>When I redraw the arc, the canvas will flicker in safari. But when I remove shadow or gradient, it works fine.
  Here is the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.querySelector('canvas').getContext('2d');
  var angle = 0;
  setInterval(function () {
      if (++angle &gt; 360) {
          angle = 1;
      }
      draw(angle);
  }, 30);
  
  function draw(angle) {
      ctx.clearRect(0, 0, 200, 200);
      ctx.beginPath();
      ctx.lineWidth = 3;
  
      // shadow
      ctx.shadowBlur = 20;
      ctx.shadowColor = 'yellow';
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
  
      // gradient
      var grd = ctx.createLinearGradient(100, 0, 100, 100);
      grd.addColorStop(0, 'red');
      grd.addColorStop(1, 'blue');
      ctx.strokeStyle = grd;
  
      ctx.arc(100, 100, 80, 0, Math.PI / 180 * angle);
      ctx.stroke();
      ctx.closePath();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my safari version</p>
  
  <pre><code>Mac
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15"
  
  iPhone
  Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1
  </code></pre>