HTML5 - Beginners - localStorage map.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
</head>
<body>
  <div id="test"></div>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");

	// This would be our tile map or other data
	map = [
		[1,2,3],
		[3,2,1],
		[0,0,0]
	];
	
	// Store the map array into 
	// localStorage as JSON string.
	localStorage.data = JSON.stringify(map);
	
	map = [
		[0,0,0],
		[1,1,1],
		[0,0,0]
	];
	// Read the string from localStorage 
	// and parse it back.
	let a = JSON.parse(localStorage.data);
	
	// Convert the read data back into the 
	// multi dimensional map array.
	var cnt = 0;
	for(y=0;y<3;y++){
		// read the first array data
		// into the new b array
		var b = a[cnt].splice(",");
		var cnt2=0;
		for(x=0;x<3;x++){
			// read the data from b
			// into our map..
			map[x][y] = b[cnt2];
			cnt2++;
		}
		cnt++;
	};


	gameloop=setInterval(doGameLoop,16);

	function doGameLoop(){
		myCanvas.height = window.innerHeight-32;
		myCanvas.width = window.innerWidth-32;
		ctx.fillStyle="rgb(0,0,0)";
		ctx.fillRect(0,0,c.width,c.height);
		ctx.fillStyle="rgb(255,255,255)";

		for(y=0;y<3;y++){
		for(x=0;x<3;x++){
			ctx.fillText(map[x][y],(x*32)+64,(y*32)+64);
		}}		
	}
</script>
</body>
</html>