title: requestAnimationFrame not working in Safari/Opera. Tearing my hair out
body: <p>I have a problem to which I have no answer for and needing an extra pair of eyes to shed some light on the situation, so here it goes:</p>
  
  <p>In Chrome and FF, my little animation works fine (4 circles are being drawn at the same time when a user hovers over the div they reside in).</p>
  
  <p>BUT...as far as Safari and Opera are concerned, they just don't want to show my animation. I've been on the Error Console and the message i'm getting is:</p>
  
  <p>Type Error: 'undefined is not a function (evaluating 'requestAnimationFrame (function {</p>
  
  <p>animate(curPerc/100)</p>
  
  <p>})')</p>
  
  <p>And i'm not sure what is happening here but I  think that the 'animate' function is looping round, only working on a 'hover' function and when it finishes its first loop, the function is looking for another input, doesn't receive one, which then results in an 'undefined' error?? I could be way out on this though! 
  Plus..this doesn't explain why it would work in Chrome and FF and not Safari or Opera</p>
  
  <p>Here is the code for one of the circles animation to give you an idea:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="myCanvasVD" width="200" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>(function() {
   var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
   window.requestAnimationFrame = requestAnimationFrame;
  })();
  
  $(document).ready(function() {
  $("#aboutPageDiv").hover(function() {
              var myCanvas = document.getElementById('myCanvasVD');
              var ctx = myCanvas.getContext("2d");
              var x = myCanvas.width / 2;
              var y = myCanvas.height / 2;
              var radius = 75;
              var endPercentVD = 87;
              var curPerc = 0;
              var counterClockwise = false;
              var circ = Math.PI * 2;
              var quart = Math.PI / 2;
  
              ctx.lineWidth = 32;
              ctx.strokeStyle = '#34c3e5';
              ctx.lineCap = "round";
  
  function animate(current) {
   ctx.clearRect(0, 0, ctx.width, ctx.height);
   ctx.beginPath();
   ctx.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
   ctx.stroke();
  
   curPerc++;
   if (curPerc &lt; endPercentVD) {
       requestAnimationFrame(function () {
           animate(curPerc / 100)
  
       });
     } 
   }
  
   animate();
   }
  
   );
   });
  </code></pre>
  
  <p>If anyone knows a solution to get this to work on Safari and Opera, It'd really appreciated and a Christmas card would be coming to you in the post...</p>
  
  <p>Oh and yes, I do have the latest version of Safari and Opera!</p>
  
  <p>Thanks very much,</p>
  
  <p>Tim</p>