canvas - image loading

So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes.

What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading).

Could I stop the canvas from reloading the image each time the page is reloaded and if so then how?
Can I make the canvas only load a part of the image, if so then how?

If neither is possible any tips, solutions how to solve the performance issues?

Odd, i'm messing around with canvas at the moment too. A poker game. I have all the cards as one image at about 1.2mb and it only glitches out on me the 1st time. Once the image has loaded it should be on your computer (or client computer) and shouldn't have to reload o.O I'v also not noticed any other strains on performance.

Hmm, maybe it's the code I'm using (I'm not very good at javascript).
<script type="text/javascript">
var xLoc=<?php echo"$player[xLoc]";?>; var yLoc=<?php echo "$player[yLoc]";?>; var xSq; var ySq;
if (xLoc>0)
{xSq=xLoc*64;}
else {xSq=0;}
if (yLoc>0)
{ ySq=yLoc*64;}
else {ySq=0;}
$('#loader').show();
var can=document.getElementById("map");
var cxt=can.getContext("2d");
var img=new Image();
window.onload = function(){
cxt.drawImage(img,0,0,320,320,0,0,320,320);
cxt.fillStyle="rgba(255, 255, 0, 0.4)";
cxt.fillRect(xSq,ySq,63,63);
$('#loader').hide();};
img.src="menu/maps/map_images/map.png";

</script>

Anyone sees problems :S?

Bump, so no help?