follow...">

Poor html5 canvas performance 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;
        }

        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 in Chrome this code works smoothly, but under FireFox (3.6.15) it takes some time to resize the window. What is the problem? And how to fix it, so that it will also work smoothly under FF?

+3
source share
1 answer

Firefox drawImage function has poor performance

You might want to add the setTimeout function to onresize so that it does not try to redraw when the user drags the window to improve performance.

+1
source

All Articles