Estou desenvolvendo um sistema para filtro de imagens com canvas do html5, porém, como estou no início já me surgiram algumas dúvidas e erros.

Segue o que eu já desenvolvi até o momento:

    $(document).ready(function() {
    	$("#uploadImagem").change(function(e) {
       		var _URL = window.URL || window.webkitURL,
    		arquivo = e.target.files[0],
    		tipoImagem = /image.*/,
    		reader,
    		imagem;
    
            if(!arquivo.type.match(tipoImagem)) {
                alert("Somente imagens são aceitas!");
                return;
            }
    
            imagem = new Image();
    
            imagem.onload = function() {
            	if(this.width > 600 || this.height > 400) {
    	        	alert("Somente imagens com largura máxima de 600px e altura máxima de 400px");
    	        	return;
    	        } else {
		        	$("#filtrarImagem").width(this.width).height(this.height);
		        }
	        };
    
	        imagem.src = _URL.createObjectURL(arquivo);
    
	        reader = new FileReader();
	        reader.onload = fileOnload;
	        reader.readAsDataURL(arquivo);
		});
    
		function fileOnload(e) {
	    	var $img = $("<img>", {src: e.target.result}),
	    	canvas = $("#filtrarImagem")[0],
	    	context = canvas.getContext("2d");
    
	    	$img.load(function() {
	    		context.drawImage(this, 0, 0);
	    	});
		}
	});

 1. Quando eu faço o `imagem.onload...` gostaria que, se os pixels da imagem fossem maiores que 600 e 400 ele desse o alert e parasse por ali, porém, mesmo assim a imagem aparece no canvas.
 2. Na mesma função `imagem.onload...` se os pixels da imagem corresponderem ao exigido o canvas (de id="filtrarImagem") fica do tamanho da imagem, porém a imagem que vai ao canvas fica distorcida, sendo que era para ela ocupar todo o canvas e ficar do tamanho original.

Como proceder?