Please find below jsfiddle for reference
jsFiddle for Mozilla Firefox -- http://jsfiddle.net/ranu_mandan/EBmdf/
Javascript (FF)
var c=document.getElementById("myCanvas"… (read more)
Please find below jsfiddle for reference
jsFiddle for Mozilla Firefox -- http://jsfiddle.net/ranu_mandan/EBmdf/
Javascript (FF)
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);
}
}
jsFiddle for Google Chrome -- http://jsfiddle.net/ranu_mandan/mk5rZ/
Javascript (Chrome)
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);
}
}
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>
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 ?
