Poor performance of html5 canvas under firefox

I have the following html5 code:

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

followed by some 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;
        }
开发者_Go百科
        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>

Now the problem is that under Chrome this code works smoothly, but under FireFox (3.6.15) when I resize the window, then it takes a while to work. What can be the problem? And how to fix it, so it would also work smoothly under FF?

Firefox's drawImage function has poor performance

You might want to consider adding a setTimeout function in the onresize to prevent it from trying to redraw while the user is dragging the window to improve performance.