JavaScript Academy · Lección

Trabajo con imágenes y texto

Dibuje imágenes y texto con estilos en el canvas.

Trabajo con imágenes y texto es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 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.

Cargar una imagen

Canvas dibuja a partir de un HTMLImageElement. Cree un objeto Image, establezca su src y espere a onload antes de dibujar; los píxeles no están disponibles hasta ese momento.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

Conceptos básicos de drawImage

drawImage(img, dx, dy) pinta la imagen en la posición indicada y con su tamaño natural.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Escalar imágenes

La forma de 5 argumentos, drawImage(img, dx, dy, dWidth, dHeight), escala la imagen para ajustarla a un cuadro de destino.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Recortar con un rectángulo de origen

La forma de 9 argumentos permite recortar: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Los cuatro primeros describen el fragmento de origen.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Dibujar texto relleno

fillText(text, x, y) pinta texto usando fillStyle. De forma predeterminada, y indica la línea base del texto.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Texto con contorno

strokeText(text, x, y) dibuja únicamente el contorno usando strokeStyle y lineWidth.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

La propiedad font

font sigue la notación abreviada de CSS: [style] [weight] size family. El tamaño y la familia son obligatorios.

ctx.font = "italic bold 28px Georgia, serif";

Alineación del texto

textAlign (start/end/left/right/center) establece el anclaje horizontal; textBaseline (top/middle/alphabetic/bottom) establece el anclaje vertical alrededor del punto indicado.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Medir el texto

measureText(text) devuelve un objeto TextMetrics. Su propiedad width indica qué ancho tendrá el texto al renderizarse; es esencial para la distribución y el ajuste de líneas.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Ajuste de palabras sencillo

Combine measureText con un bucle para ajustar cadenas largas en varias líneas.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Sombras para dar profundidad

Las propiedades de sombra se aplican a formas, imágenes y texto: shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Comprobación rápida

Compruebe sus conocimientos sobre el dibujo de imágenes y texto.

Resumen: imágenes y texto

Ha aprendido a cargar imágenes y dibujarlas con escalado y recorte mediante drawImage, renderizar texto con fillText/strokeText, establecer font, alinear texto, medir anchos con measureText y añadir sombras. A continuación: animación.

Preguntas frecuentes

¿La lección «Trabajo con imágenes y texto» es gratis?

Sí — el texto completo de «Trabajo con imágenes y texto» 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 «Trabajo con imágenes y texto»?

Dibuje imágenes y texto con estilos en el canvas. 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 3 de 4.

¿Cuánto tiempo toma la lección «Trabajo con imágenes y texto»?

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