HTML Academy · Lección

Configurar canvas y el contexto 2D

Cree un elemento canvas y obtenga el contexto de representación 2D

Configurar canvas y el contexto 2D es una lección gratuita de HTML 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

El elemento canvas

El elemento <canvas> es una superficie de mapa de bits en la que se puede dibujar dentro del navegador:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Atributos de anchura y altura

Establezca siempre las dimensiones de canvas mediante atributos HTML, no mediante CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Obtención del contexto 2D

Obtenga el contexto de renderizado 2D para dibujar:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Sistema de coordenadas

El sistema de coordenadas de canvas comienza en la esquina superior izquierda:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Estado de canvas

El canvas tiene un estado de dibujo que se puede guardar y restaurar:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Borrado del canvas

Borre todo el canvas antes de volver a dibujar (para las animaciones):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle y strokeStyle

Establezca los colores para las operaciones de relleno y trazo:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth y otras propiedades de estilo

Propiedades del trazo y del estilo de línea:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Canvas HiDPI adaptable

Corrija el desenfoque del canvas en pantallas Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas frente a SVG

Cuándo elegir canvas o SVG:

Canvas: mapa de bits, píxel a píxel, ideal para juegos, visualizaciones de datos grandes y procesamiento de imágenes
SVG: vectorial y escalable, ideal para logotipos, iconos, gráficos con elementos interactivos y accesibilidad

Accesibilidad de canvas

Canvas no ofrece accesibilidad integrada; debe añadirla manualmente:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Comprobación rápida

¿Cuál es la forma correcta de obtener un contexto de dibujo de canvas?

Repaso: configuración de Canvas

Aspectos esenciales de la configuración de Canvas:

Establezca la anchura y la altura mediante atributos HTML, no mediante CSS
canvas.getContext('2d'): obtiene el contexto de dibujo
Origen en la esquina superior izquierda (0,0); x→derecha, y→abajo
ctx.save() / ctx.restore(): gestión del estado basada en una pila
Escale mediante devicePixelRatio para obtener un renderizado nítido en pantallas Retina

Preguntas frecuentes

¿La lección «Configurar canvas y el contexto 2D» es gratis?

Sí — el texto completo de «Configurar canvas y el contexto 2D» 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configurar canvas y el contexto 2D»?

Cree un elemento canvas y obtenga el contexto de representación 2D Practicas HTML 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 HTML Academy?

No se requiere experiencia previa. HTML 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 «Configurar canvas y el contexto 2D»?

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 HTML Academy?

Sí. Cada lección de HTML 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 HTML Academy