«CGContextClearRect: вызывается с непустым путем» в Canvas2d в Mac

Question

Я написал простой код для рисования анимированного круга с тенью здесь

function animate(){
  if(i<=360){
    var rad_grad = ctx.createRadialGradient(200,200,0, 200,200,100);
    rad_grad.addColorStop(0,'#fff');
    rad_grad.addColorStop(1, '#444');

    ctx.clearRect(0,0,canvas.width, canvas.height);

    ctx.beginPath();  
    ctx.strokeStyle = lin_grad;
    ctx.lineWidth = 30; //20
    ctx.arc(200,200,50,0,Math.PI*(i=i+2)/180);
    ctx.stroke();

    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 5;
    ctx.shadowColor = 'rgba(68,68,68,0.7)';

    ctx.closePath();

    window.webkitRequestAnimationFrame(animate);
  }
  else{
    window.webkitCancelRequestAnimationFrame();
  }
}

Теперь этот код работает хорошо. В этом нет проблем. Но когда я запускаю Google Chrome из командной строки в Mac , я продолжаю получать CGContextClearRect: called with non-empty path Ошибка в командной строке, когда включена анимация. однако, если я запускаю тот же код из командной строки в Ubuntu, я ничего не получаю.

Проблема воспроизводима, когда есть анимированные тени. Если я удаляю Shadow Code и сохраняю анимацию, она работает хорошо. Даже если я удаляю анимацию и сохраняю тень, это тоже работает. Проблема возникает только тогда, когда Shadow и Animation присутствуют, и эта ошибка обнаруживается только в Mac OS.

Я гуглил по CGContextClearRect: called with non-empty path n Я обнаружил, что это связано с разработкой Mac. У меня нет опыта с этим. Может кто-нибудь сказать, почему такое поведение?

Answer 1

Я считаю, что если вы поместите вызов clearRect() в путь, как этот ...

ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.closePath();

, проблема может исчезнуть.