Canvas drawImage size is wrong

Question

I have the following html :

        <div id="container">
            <canvas id="canvas"></canvas>
        </div>
        <img src="sprites/total.png">

With this css

#container {
    height: 515px;
    width: 1200px;
    margin: auto;
    border: 6px rgba(109, 53, 10, 0.52) groove;
}
#canvas {
    height: 100%;
    width: 100%;
/*  background-image:url(images/tile.png); */
}

I insert my image into the canvas with javascript :

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    var total = new Image();
    total.src = 'sprites/total.png';
    total.addEventListener('load', function() {
        context.drawImage(this, 0, 0);
    }, false);

However, the size of the image inside the canvas is WAY bigger than what it actually should be... here is a link to the page itself

Thanks all