Buen día a todos 😁👍

Intento seguir los pasos de MDN, en la creación de un lienzo enlace aquí, pero no me aparece lo señalado.

Adjunto imagen.

Con el script que tengo debería rellenarse un rectángulo de color rojo, pero no aparece.

Mismo problema tuve llevando el curso aquí sobre Canvas, no sé cómo solucionarlo, o qué podría estar haciendo mal. Muchas gracias por su tiempo y por su ayuda.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: <a href="/comunidad/publicaciones?q=%23eee" data-community-hashtag="true">#eee</a>; display: block; margin: 0 auto; }
    </style>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.rect(20, 40, 50, 50);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
    </script>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

</body>
</html>

PD: los métodos y demás que son propios del canvas como getContext("2d"), beginPath( ), ni siquiera aparecen en mi autocompletado de Visual Studio Code, como si no los reconociera, ¿qué puede ser eso?

Buen día a todos 😁👍

Intento seguir los pasos de MDN, en la creación de un lienzo enlace aquí, pero no me aparece lo señalado.

Adjunto imagen.

Con el script que tengo debería rellenarse un rectángulo de color rojo, pero no aparece.

Mismo problema tuve llevando el curso aquí sobre Canvas, no sé cómo solucionarlo, o qué podría estar haciendo mal. Muchas gracias por su tiempo y por su ayuda.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: <a href="/comunidad/publicaciones?q=%23eee" data-community-hashtag="true">#eee</a>; display: block; margin: 0 auto; }
    </style>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.rect(20, 40, 50, 50);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
    </script>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

</body>
</html>

PD: los métodos y demás que son propios del canvas como getContext("2d"), beginPath( ), ni siquiera aparecen en mi autocompletado de Visual Studio Code, como si no los reconociera, ¿qué puede ser eso?

Buen día a todos 😁👍

Intento seguir los pasos de MDN, en la creación de un lienzo enlace aquí, pero no me aparece lo señalado.

Adjunto imagen.

Con el script que tengo debería rellenarse un rectángulo de color rojo, pero no aparece.

Mismo problema tuve llevando el curso aquí sobre Canvas, no sé cómo solucionarlo, o qué podría estar haciendo mal. Muchas gracias por su tiempo y por su ayuda.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: <a href="/comunidad/publicaciones?q=%23eee" data-community-hashtag="true">#eee</a>; display: block; margin: 0 auto; }
    </style>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.rect(20, 40, 50, 50);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
    </script>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

</body>
</html>

PD: los métodos y demás que son propios del canvas como getContext("2d"), beginPath( ), ni siquiera aparecen en mi autocompletado de Visual Studio Code, como si no los reconociera, ¿qué puede ser eso?