Ciao a tutti

stavo realizzando una griglia utilizzando l'elemento canvas!!
premetto che sto studiando l'html5 e che quindi posso anche aver sbagliato cose basilari
il punto è che mi funziona con google chrome ma (ad esempio) non con firefox!! Perchè???

allego il link sperando che qualcuno mi sappia dare una mano!!!

http://www.alexinfantini.com/prova/prova2.html

e questo è il codice:

codice:
<html>
   <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>prova</title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  

  
  <style type="text/css">
    body {
    background: #000;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}

canvas {
    background: #fff;
}

  </style>
  


<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
//grid width and height
var bw = document.width;
var bh = document.height;
//padding around grid
var p = 0;
//size of canvas
var cw = document.width;
var ch = document.height;

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

var context = canvas.get(0).getContext("2d");

function drawBoard(){
    for (var x = 0; x <= bw; x += 85) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }


    for (var x = 0; x <= bh; x += 85) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }

    context.strokeStyle = "black";
    context.stroke();
}

drawBoard();

});//]]>  
$(document).ready(function() {
		$('<canvas>').hover( function() {
				$(this).animate({opacity: "0.25"}, 500 );
		},
		function() {
				$(this).delay(200).animate({opacity: "0.01"}, 500 );
		});
	});
</script>


</head>

<body>

</body>
</html>
aprite il file con google chrome e vedete come dovrebbe essere -.-'

grazie anticipatamente