getImageData not working

HTML

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

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');
}

$(document).ready(function(){
    ctx.drawImage(document.getElementById('srcImg'), 0, 0);
	var pixels = ctx.getImageData(0, 0, 32, 32),
	    wtf = pixels.data,
        hexColor,
        x,
        y,
        scale;
    
    scale = 3;
    ctx.clearRect(0,0,32,32);
    
    //Drawing the pixels to the canvas.
    for(var i = 0; i < pixels.data.length; i+=4){
        hexColor = "#" + ((1 << 24) + (pixels.data[i] << 16) + (pixels.data[i+1] << 8) + pixels.data[i+2]).toString(16).slice(1);
        
        y = ~~((i/4) / pixels.width);
        x = (i/4) - y * pixels.height;
        
        ctx.fillStyle = hexColor;
        ctx.fillRect(x * scale, y * scale, scale, scale);
    }
});