Chrome Smooth Rendering of Text

by ranu_mandan

HTML

<!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>

JavaScript

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);
  }

}