Image smaller than the original canvas upup when drawImage()

Question

I am developing a system to filter images with canvas Html5, however, as I am at the beginning, I have already had some doubts and errors. At this "start" I want the canvas size to be equal to the chosen image, so it takes up the entire space of the canvas.

Follow what I’ve developed so far:

$(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. When I do the imagem.onload... I would like that if the pixels of the image were larger than 600 and 400 he gave the Alert and stopped there, however, still the image appears in the canvas.
2. In the same role imagem.onload... if the pixels of the image match the required canvas (id="filterImage") is the size of the image, but the image that goes to the canvas is smaller than normal and does not occupy the entire canvas, which was supposed to occupy the entire canvas and be the original size.

How to proceed?

Answer 1

Follow an example working:

$(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");
                // antes desse return pode ser feito o enquadramento do 600x400
                // no caso do usuario selecionar uma imagem pequena e depois mudar p/ uma grande
                //$("#filtrarImagem").width(600).height(400);
                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() {
                //img = this;
                //setTimeout(function(){
                    context.drawImage(this, 0, 0,300,150);
                //},1000);
            });
        
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadImagem"/>
<canvas id="filtrarImagem" style="width: 600px; height: 400px; border: solid 1px #000"></canvas>

I used as a reference source the site http://www.w3schools.com/tags/canvas_drawimage.asp