reconozco que mi compu es lenta y de poca memoria por eso tamb la reinicio y vuelvo a hacer de cero porque puede no tomar el cod pero nada.

Compañero tu codigo si compila en mi VSCode, prueba con sublime

Te quedo bien Enmanuel? ohhh bajar sublime no. Tengo que deshabilitar VSCode instalar sublime, ver como se usa sublime, a la tarde pruebo si sigue sin funcionarme hare eso. Pero facil perdi 1 hora y media viendo y pensando el error. Gracias por tu tiempo.

Si salio todo bien el triangulo y el circulo

Que lindo que salió!!!! jejeje a mi solo me toma la bandera. Y estaba viendo en otros comentarios que algunos tampoco les tomo el triángulo. Ojo que puede ser problema de canvas en Vscode. La verdad no se mas tarde intento de vuelta.

Hola, tengo el mismo problema.

Según mi código está bien pero al abrirlo en el navegador solo me aparece la bandera. El triángulo y el circulo no aparecen.

Les agradecería si pudieran ayudarme. Saludos Igual comparto el código

<canvas width="600" heigth="400"> </canvas>

<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");


pincel.fillStyle = "lightgrey" // propiedad
pincel.fillRect(0,0,600,400);

pincel.fillStyle = "green";
pincel.fillRect(0,0,200,400);

pincel.fillStyle = "red";
pincel.fillRect(400,0,200,400);

pincel.fillStyle = "yellow";
pincel.beginPath();
pincel.moveTo(300,200);
pincel.lineTo(200,400);
pincel.lineTo(400,400);
pincel.fill();


pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(300,200,50,0,2*3.14);
pincel.fill();


</script>

Vos sabes que despues me leyo. lo reinicie, pero tuve muchos problemas. Todo un tema el canvas en el VS Code

Hola Carlos Augusto,

Revisé tu código y el problema está en la primera linea donde defines el height o altura del canvas, estás indicando heigth es decir la H es antes de la T, tu la tienes después, solo corrige eso en la primera linea y funciona.

Saludos

Henry si tienes razón ese era el problema. Te agradezco mucho

Saludos (y) (y)

Estimado Ernesto que bueno que ya Henry ayudo a encontrar el error. Por otro lado el editor de texto no tiene nada que ver con que funcione un código o no .. el código lo ejecuta el navegador. Así que de igual es importante que trates de tener actualizado el navegador ya sea el Chrome, Mozilla Firefox, Edge, Opera, etc.

Otra buena practica es comentar el código par ir verificando su funcionamiento y puedes buscar la información técnica en algunos sitios por ejemplo: -https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D -https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc -https://www.geeksforgeeks.org/html-canvas-beginpath-method/ -https://www.w3schools.com/tags/canvas_beginpath.asp

Esto ayudara a que logres mayor dominio poco a poco ... y pues acá estamos también tus compañeros para apoyarte

<meta charset="UTF-8">
<h1>Dibujando una Bandera con JS</h1>
<!-- creamos la pizarra -->    
<canvas width="600" height="400">  </canvas>
<!-- <input/>
<button>Verificar si acerto con el secreto</button> -->
<script>
    //********* a crear la bandera  *********
    // tomamos el control de la pizarra con JS
    let pantalla = document.querySelector("canvas");
    // Definimos nuestra pizzarra como de 2 dimenciones
    let pincel = pantalla.getContext("2d");
    // establecemos el color de relleno en gris claro
    pincel.fillStyle = "lightgrey"; //propiedad de llenado
    // Con esta función se rellena todo el fondo de la pizarra
    pincel.fillRect(0,0,600,400); //función para dibujar
    // establecemos el color de relleno en verde
    pincel.fillStyle = "green"; //propiedad de llenado
    // Rellenamos una sección de color verde para crear una sección de la badera al lado izq.
    pincel.fillRect(0,0,200,400); //función para dibujar
    // establecemos el color de relleno en rojo
    pincel.fillStyle = "red"; //propiedad de llenado
    // Rellenamos una sección de color rojo para crear una sección de la badera al lado der
    pincel.fillRect(400,0,200,400); //función para dibujar

    //********* a crear la el escudo  *********

    // creando un dibujo al centro de la bandera (tringulo)
    // establecemos el color de relleno en amarillo
    pincel.fillStyle = "yellow"; //propiedad de llenado
    // Reiniciamos un camino
    pincel.beginPath();
    // llevamos el pincel al centro de nuestra pizarra (ahora nuestra bandera)
    pincel.moveTo(300,200);
    //Trazamos una línea hasta la posición horizontal de 200 y vertical de 400
    pincel.lineTo(200,400);
    //Trazamos una línea hasta la posición horizontal de 400 y vertical de 400
    pincel.lineTo(400,400);
    //Rellenamos el área demarcada -- listo ya está nuestro triángulo.
    pincel.fill();

    // creando un dibujo al centro de la bandera (circulo - sobre el triángulo)
     // establecemos el color de relleno en azul
    pincel.fillStyle="blue";
    // Reiniciamos un camino
    pincel.beginPath();
    //Trazamos un arco para dibujar curvas que nos formen un círculo cuyo centro está en el 
        // vértice superior del triángulo (300,200)
        // Angulo de iniciio en 50
        // Angulo de finalización en 0
        // vueltas del reloj = 2*3.14
    pincel.arc(300,200,50,0,2*3.14);
    // rellenamos el área demarcada
    pincel.fill();    
</script>