Tengo una consulta. El canvas me aparece con una relación de 300 x 400 en el tablero de desarrollador de mi navegador Chrome, cuando en el programa lo tengo : <canvas whidth = "600" height= "400">

<canvas whidth = "600" height= "400"></canvas>

<script>
    function dibujarCuadrado(x,y,color) {
        var pantalla = document.querySelector("canvas"); // conectame las etiquetas de HTML con las instrucciones de JS
        var pincel = pantalla.getContext("2d");  // traeme (get) todo el contenido de la pantalla ancho x largo.Creamos un script para captura la pantalla con el pincel
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50); // se reemlaza por variable, definida en el parámetro. c//uncion - sirve para llenar el rectangulo, viene con 4 parametros(eje cartesiano) En el ejemplo 200 en el eje "x" y 50 en el eje "y", 350 en en el eje horizonltal y 300 en el eje vertical. Es un "método" del objeto pincel que usabamos para diseñar las figuras, 
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50); // este método dibuja un rectangulo sin relleno,.
    }

    var x = 0;
    while(x < 600) {
        dibujarCuadrado(x,0,"green");
        dibujarCuadrado(x,50,"green");
        dibujarCuadrado(x,100,"green");
        x = x + 50;

    }
</script>