Firefox skips rendering text in Canvas

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";

var counter = 0;
c.addEventListener('DOMMouseScroll',function(event){

    draw();

    return false;

}, false);

function draw(){   

   var j = ++counter;
   for(var i = 0; i < 10000; i++){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillText("Hello World " + j ,10,50);
   }

 }

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";

var counter = 0;
c.addEventListener('mousewheel',function(event){

   draw();

   return false;

}, false);

function draw(){   

  var j = ++counter;
  for(var i = 0; i < 10000; i++){
   ctx.clearRect(0, 0, c.width, c.height);
   ctx.fillText("Hello World " + j ,10,50);
  }
}

<!DOCTYPE html>
<html>
<body>
<span>Scroll on below canvas</span>
<br/>    
<canvas id="myCanvas" width="600" height="100" style="border:5px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

Please find below jsfiddle for reference jsFiddle for Mozilla Firefox -- http://jsfiddle.net/ranu_mandan/EBmdf/ Javascript (FF) <br /> <pre><nowiki>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var counter = 0; c.addEventListener('DOMMouseScroll',function(event){ draw(); return false; }, false); function draw(){ var j = ++counter; for(var i = 0; i < 10000; i++){ ctx.clearRect(0, 0, c.width, c.height); ctx.fillText("Hello World " + j ,10,50); } } </nowiki></pre> jsFiddle for Google Chrome -- http://jsfiddle.net/ranu_mandan/mk5rZ/ Javascript (Chrome) <br /> <pre><nowiki>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var counter = 0; c.addEventListener('mousewheel',function(event){ draw(); return false; }, false); function draw(){ var j = ++counter; for(var i = 0; i < 10000; i++){ ctx.clearRect(0, 0, c.width, c.height); ctx.fillText("Hello World " + j ,10,50); } } </nowiki></pre> HTML <br /> <pre><nowiki><!DOCTYPE html> <html> <body> <span>Scroll on below canvas</span> <br/> <canvas id="myCanvas" width="600" height="100" style="border:5px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> </body> </html></nowiki></pre> Now try Scrolling fast using mouseWheel on canvas on above fiddles , you will find numbers are skipped in Firefox , whereas Google Chrome renders smoothly without skipping the numbers. How to make rendering similar to Google Chrome in Firefox browser ?