getImageData not working

HTML

<body>
	
	<canvas id="canvas" width="400" height="300">
	</canvas>
	
</body>

CSS

*{
    margin: 0px;
}

JavaScript

var canvas = document.getElementById('canvas');  
var cwidth = $("canvas").innerWidth();
var cheight = $("canvas").innerHeight();
if (canvas.getContext){  
  var ctx = canvas.getContext('2d');
}

var lvlImg = new Image();
var lvlReady = false;
lvlImg.onload = function(){
	lvlReady = true;
	ctx.drawImage(lvlImg, lvl.x, lvl.y);
}
lvlImg.src = 'http://www.philip-maerz.de/game/flip_it.png';

var lvl = {
	h: 16,
	w: 16,
	x: 0,
	y: 0
};

var pdata = new Array();
	for(i=1;i<=lvl.h * lvl.w;i++){
		pdata[i] = new Array();
		pdata[i][0] = 0;
		pdata[i][1] = 0;
		pdata[i][2] = 0;
		pdata[i][3] = 0;
	}

$(document).ready(function(){
	var pixels = ctx.getImageData(0, 0, 16, 16);
	var wtf = pixels.data;
	
	for(i=0;i<lvl.h;i++){
		for(l=0;l<lvl.w;l++){
			
			var punktwert = (i*lvl.w) + l;
			var bdwert = punktwert * 4;
			pdata[punktwert][0] = wtf[29]; //R-Wert
			pdata[punktwert][1] = wtf[30]; //G-Wert
			pdata[punktwert][2] = wtf[31]; //B-Wert
			pdata[punktwert][3] = wtf[32]; //A-Wert
		}
	}
	
	for(i=0;i<= lvl.h * lvl.w;i++){
		var offsx = 20;
		var offsy = 20;
		var groessenfaktor = 3;
		ctx.beginPath();
		var fss = "rgba(" + pdata[i][0] + "," + pdata[i][1] + "," + pdata[i][2] + "," + pdata[i][3] + ")";
		ctx.fillStyle = fss;
		var actx = offsx + ((i%16) * groessenfaktor);
		var acty = offsy + (((i/16) - (i%16)) * groessenfaktor);
		ctx.moveTo(actx, acty);
		ctx.lineTo(actx + groessenfaktor, acty);
		ctx.lineTo(actx + groessenfaktor, acty + groessenfaktor);
		ctx.lineTo(actx, acty + groessenfaktor);
		ctx.lineTo(actx, acty);
		ctx.fill();
	}

});