JavaScript Academy · Lección

Configuración del contexto de Canvas

Obtenga y configure el contexto de renderizado 2D.

Configuración del contexto de Canvas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es la Canvas API?

La Canvas API permite dibujar gráficos 2D con JavaScript en un elemento <canvas>. Proporciona una superficie de dibujo formada por píxeles y un conjunto de comandos para pintar formas, imágenes y texto.

El marcado consta de una sola etiqueta <canvas>.
Todo el dibujo se realiza en JavaScript mediante un objeto context.

<canvas id="board" width="320" height="200"></canvas>

Obtener el contexto

Llame a getContext('2d') en el elemento canvas para obtener un CanvasRenderingContext2D. Todos los comandos de dibujo pasan por este objeto.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

El sistema de coordenadas

El origen (0, 0) se encuentra en la esquina superior izquierda. X aumenta hacia la derecha y Y aumenta hacia abajo. Un canvas de 320x200 tiene la esquina inferior derecha en (320, 200).

Atributos de ancho y alto

Los atributos HTML width y height establecen el tamaño del búfer de dibujo en píxeles. Si se omiten, su valor predeterminado es 300x150. Establecerlos en JavaScript también limpia el canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Tamaño CSS frente a tamaño del búfer

Las propiedades CSS width/height amplían el canvas en pantalla, pero NO cambian el búfer de píxeles. Si difieren de los atributos, los dibujos se ven borrosos o estirados. Manténgalos sincronizados para obtener una salida nítida.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Gestionar pantallas de alta densidad de píxeles

En las pantallas Retina, devicePixelRatio suele ser 2. Amplíe el búfer y reduzca el contexto para que las líneas se mantengan nítidas.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Establecer estilos de relleno y contorno

El estado del dibujo se almacena en el contexto. fillStyle establece el color de relleno y strokeStyle establece el color del contorno. Ambos aceptan cualquier cadena de color CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Su primer dibujo

Con el contexto listo, puede pintar inmediatamente. fillRect(x, y, w, h) pinta un rectángulo relleno utilizando el fillStyle actual.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Limpiar el canvas

clearRect(x, y, w, h) borra una región rectangular y la devuelve a un estado transparente. Limpiar todo el búfer suele ser el primer paso de cada fotograma de animación.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Guardar y restaurar el estado

save() apila el estilo y la transformación actuales; restore() los recupera de la pila. Esto aísla los cambios temporales.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Detección de características

Evite problemas con navegadores muy antiguos comprobando que getContext exista antes de utilizarlo.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Comprobación rápida

Compruebe su comprensión de la configuración de canvas.

Resumen: configuración de Canvas

Ha aprendido a obtener el canvas, llamar a getContext('2d'), comprender el origen situado en la esquina superior izquierda, establecer el tamaño del búfer y el tamaño CSS, gestionar pantallas de alta densidad con devicePixelRatio y configurar fillStyle/strokeStyle. A continuación: dibujo de formas y trazados.

Preguntas frecuentes

¿La lección «Configuración del contexto de Canvas» es gratis?

Sí — el texto completo de «Configuración del contexto de Canvas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración del contexto de Canvas»?

Obtenga y configure el contexto de renderizado 2D. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Configuración del contexto de Canvas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy