Поиск в Поддержке

Избегайте мошенничеств со службой поддержки. Мы никогда не просим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Сообщить о нарушении».

Learn More

Firefox skips rendering text in Canvas

  • 1 ответ
  • 2 имеют эту проблему
  • 125 просмотров
  • Последний ответ от cor-el

more options

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 ?

Изменено cor-el

Все ответы (1)

more options

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.