画布drawImage大小错误

Question

我有以下html：

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

用这个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); */
}

我使用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);

但是，画布内的图像大小比实际大小要大...... here is a link to the page itself

全部谢谢