HTML Canvas
Antes, SVG puso iconos nítidos como marcado vectorial o archivo .svg. Esta lección presenta canvas: una caja de mapa de bits vacía que pinta JavaScript. HTML solo coloca y dimensiona; los scripts dibujan píxeles. Alcance práctico — elemento + dibujo 2D mínimo — no un curso completo de Canvas API, juegos o WebGL.
Por qué canvas en un curso HTML
Los principiantes ven canvas en gráficos y minijuegos. La división ayuda: HTML posee el elemento; JS los píxeles. Tras SVG, canvas muestra la otra herramienta habitual. Aquí bastan getContext("2d") y fillRect.
Respuesta directa
1) Añade canvas con id, width, height y texto de respaldo. 2) En JS getContext("2d"). 3) Dibuja con fillStyle + fillRect. 4) Los atributos fijan la resolución del bitmap. 5) SVG para iconos; canvas para píxeles dinámicos. 6) Solo intro.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Elemento canvas diminuto
Sin script, canvas es un rectángulo vacío. HTML declara tamaño e id para que el script lo encuentre.
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
Leer la cáscara
- canvas crea la superficie
- width/height fijan el bitmap
- id permite seleccionarlo
- el texto entre etiquetas es respaldo
- solo CSS puede estirar y difuminar
- a diferencia de SVG no hay formas hijas en HTML
Dibujar un rectángulo con contexto 2D
Un script corto pinta. getContext("2d") devuelve la API 2D; fillRect rellena un rectángulo.
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
Leer las llamadas de dibujo
- getElementById encuentra canvas
- getContext("2d") abre la API
- fillStyle pone el color
- fillRect rellena un rectángulo
- sin script solo respaldo
- siguiente: web storage
Elegir canvas vs SVG
- Logo estático nítido: SVG
- Píxeles que cambian mucho: canvas
- Formas como DOM: a menudo SVG
- Pensar en región de píxeles: canvas
- Insignia simple: suele SVG
- WebGL/juegos: fuera de esta intro
Práctica — canvas en la página
- Pega la cáscara.
- Añade el script; confirma el rectángulo.
- Cambia color/números.
- Quita el script un momento.
- Estira solo con CSS — posible desenfoque.
- Frase: canvas es bitmap JS; SVG marcado vectorial.
- Vista previa: web storage.
Errores fáciles
- Esperar formas solo del HTML
- Olvidar texto de respaldo
- Usar canvas para logos mejor en SVG
- Confundir canvas con SVG
- Cambiar solo el tamaño CSS
- Tomar la intro como curso completo de Canvas
- Dejar canvas sin nombre si hay significado
Resumen
- canvas es una superficie bitmap vacía
- JavaScript dibuja con getContext("2d") y fillRect
- SVG para iconos; canvas para píxeles dinámicos
- El texto de respaldo ayuda sin dibujo
- SVG era vector; aquí píxeles por script
- Siguiente: web storage en HTML
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior