canvas wird falsch dargestellt

[Whouzuo]

Hallo,
ich habe gerade angefangen canvas zu lernen, aber irgendwas stimmt nicht mit der Darstellung.

function draw(){
    var canvas = document.getElementById('field');
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(50, 50, 50)";
    ctx.fillRect (30, 30, 50, 50);
}

>   
> Eigentlich soll ein Quadrat angezeigt werden. Allerdings wird ein Rechteck angezeigt, welches ca. doppelt so hoch wie breit ist. Außerdem wird es zu groß dargestellt. Das Quadrat soll 50px mal 50px groß sein und zum oberen und zum unteren Rand jeweils 30px Abstand haben.  
  
Wie groß ist dein "field" Element? Könnte es sein, dass das Rechteck bis über die sichtbare Grenze hinaus gezeichnet wird und deswegen nur ein Teil davon zu sehen ist?