canvas wird falsch dargestellt

[Gast345678]

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.