Poco rendimiento del lienzo HTML5 bajo Firefox

Question

Tengo el siguiente código HTML5:

<canvas id="myCanvas" width=600 height=600>
</canvas>

seguido de algunos JavaScript:

<script type="text/javascript">
<!--
    var img = new Image();
    img.addEventListener('load', function()
    {
        reDraw('', this);
    }, false);

    img.src = "wood.png";

    function reDraw(canv, image)
        {
        var canvas = canv;
        if (canvas == '')
        {
            canvas = $("canvas");
        }

        var size = canvas.attr("width");
        var elem = canvas.get(0);

        if (!elem || !elem.getContext){
            return;
        }

        var context = elem.getContext('2d');
        if (!context || !context.drawImage)
            {
            return;
        }

        context.drawImage(image, 0, 0, size, size);
    };


    window.onresize = function() {
        var size = window.innerWidth;
        if (window.innerHeight < size)
        {
            size = window.innerHeight;
        };
        size = size/2;

        $("canvas").each(function()
        {
            $(this).attr({width: size, height: size});
            reDraw($(this), img);
        });
    };

// -->
</script>

Ahora el problema es que en Chrome este código funciona sin problemas, pero bajo Firefox (3.6.15) Cuando cambio de tamaño la ventana, luego lleva un tiempo funcionar. ¿Cual puede ser el problema? ¿Y cómo solucionarlo, por lo que también funcionaría sin problemas bajo FF?

Answer 1

La función de dibujo de Firefox tiene un bajo rendimiento

Es posible que desee considerar agregar una función SetTimeOut en el OnResize para evitar que intente volver a dibujar mientras el usuario arrastra la ventana para mejorar el rendimiento.