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 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?