Как избежать автопротяжения Холста HTML

У меня есть следующая часть HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

Проблема - то, что оттянутое изображение автоматически расширяется (измененное) пропорционально с размером холста. Я попытался использовать все доступные параметры (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) и это не помогло.

Что заставляет мой рисунок простираться и как я могу предотвратить это?

Спасибо,
Tom