---
title: "Lienzo — canvas tipo Figma con modo presentación | Logic2b Lab"
description: "Demo técnica: un canvas infinito estilo Figma construido con vanilla JS — pan, zoom, capas, frames arrastrables y modo presentación sobre una trama de puntos animada. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/lienzo/
  md: https://logic2b.com/lab/lienzo/index.md
---

# Lienzo Lab · Canvas interactivo

lab.logic2b.com/lienzo

Ruta: [Lab](https://logic2b.com/lab) › [Visualización 3D y datos](https://logic2b.com/sistemas/visualizacion-3d)

## Cómo se construyó Lienzo

Demo de canvas infinito al estilo Figma: ocho artboards con los bloques de un design system ficticio (portada, navegación, métricas, botones, formulario, tipografía, paleta y footer) flotan sobre una trama de puntos en movimiento — olas y anillos concéntricos generados con una semilla determinista. Se navega como en Figma: arrastrar para hacer pan, Ctrl+rueda o pellizco para zoom, panel de capas, selección con asas y frames que se pueden mover. El modo presentación oculta el chrome y encuadra cada artboard con un travelling de cámara suave, con avance manual o automático. Todo en un único HTML sin librerías.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

### Qué demuestra

- Canvas infinito con pan (arrastrar / rueda) y zoom hacia el cursor (Ctrl+rueda, pellizco táctil, botones ±)
- Ocho artboards con mini-bloques de UI reales: portada, navegación, métricas, botones, formulario, tipografía, paleta y footer
- Fondo vivo: trama de puntos animada (olas que derivan y anillos concéntricos que giran) sincronizada con el pan/zoom del canvas
- Trama seedeada con mulberry32: regenerar con la misma semilla reproduce el mismo campo de puntos
- Chrome tipo Figma: toolbar con zoom, panel de capas, etiquetas de frame que no escalan y selección con asas
- Frames arrastrables por el lienzo, como en la herramienta real
- Modo presentación: el chrome se oculta y la cámara viaja de artboard en artboard (flechas, contador y autoplay)
- Ornamentos de puntos de los artboards generados como SVG vectorial: nítidos a cualquier zoom
- Atajos de teclado: espacio para pan, +/− zoom, 0 encuadra todo, P presenta, Esc sale
- Sin librerías ni backend: un único HTML con vanilla JS, <canvas> y SVG

### Detalles

**Categoría**

Canvas interactivo

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- Canvas 2D
- SVG generado

### Categorías

[Visualización 3D y datos](https://logic2b.com/sistemas/visualizacion-3d) [Generadores y presentación](https://logic2b.com/sistemas/generadores-presentaciones) Canvas Generativo UI kit Presentación

### Lo ofrecemos con webs de

[Arquitectura e interiorismo](https://logic2b.com/diseno-web/arquitectura) [Estudios y agencias](https://logic2b.com/diseno-web/estudios-creativos)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Boceto** Generadores y presentaciones](https://logic2b.com/lab/boceto) [**Alzado** Cuadros de mando y analítica](https://logic2b.com/lab/alzado) [**Vitrina** Presentación interactiva](https://logic2b.com/lab/vitrina)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)