Social Poster Generator

A Canvas-based poster builder with six output formats, three visual presets, dark/light modes, element toggles, QR code generation and one-click PNG export — entirely client-side.

The Problem

Producing branded social assets for multiple platforms means juggling Figma artboards, exporting at different ratios, and manually placing QR codes. When campaigns move fast, non-designers on the team need a way to generate polished posters without touching a design tool.

The Solution

A workbench that renders posters directly to an HTML5 Canvas. The user fills in a few text fields, picks a format and preset, and the engine auto-fits typography, lays out content in anchored vertical zones, draws gradient backgrounds with procedural ornaments, generates a QR code from a URL, and exports the result as a high-resolution PNG.

flowchart LR
    A[User Input] --> B[State Manager]
    B --> C{Format Router}
    C -->|Portrait| D[Portrait Renderer]
    C -->|Landscape| E[Landscape Renderer]
    C -->|Square| F[Square Renderer]
    D & E & F --> G[Canvas Output]
    G --> H[PNG Export]
    B --> I[QRCode.js]
    I --> G

Loading

Formats

Name	Dimensions	Layout
Post	1080 × 1350	Portrait — 5-zone vertical stack
Story	1080 × 1920	Portrait — same zones, taller
Square	1080 × 1080	3-band split: brand top, headline+QR mid, desc bottom
TV	1920 × 1080	Landscape — text left (54%), QR right (46%)
Banner	1200 × 628	Landscape — same split
A4	2480 × 3508	Portrait — print-resolution

Presets

• Vivo — radial gradient background, gradient headline, centered layout, full-size ornaments
• Institucional — dark muted background, left-aligned text, color bar footer, reduced ornaments
• Mínimo — near-black background, typography-dominant, thin accent bar, no ornaments

Toggleable Elements

Logo, label badge, support text, QR code, CTA line, footer, decorative shapes — each independently toggled on/off.

Technical Highlights

• Zone-based layout engine: the canvas is divided into five proportional vertical zones (Brand, Head, Body, Action, Foot) with preset-specific ratios. Content is anchored within zones, never free-floating.
• Auto-fitting typography: fitFont() binary-searches for the largest font size that wraps the text within maxLines and maxWidth, then trims lines if the block still overflows its zone budget.
• Gradient headline rendering: in Vivo preset, the title is drawn with a 4-stop linear gradient (green → teal → amber → orange) applied as fillStyle via createLinearGradient.
• Procedural ornaments: 8-point star, curve-loop and arc-stroke primitives drawn with Canvas path commands and radial gradients. Each background variant positions them differently.
• Film-grain noise: pixel-level noise applied to ImageData with a configurable alpha per preset.
• QR generation: uses QRCode.js to render a QR code into an offscreen <div>, extracts the canvas/image, then draws it onto the poster with rounded-rect clipping, drop shadow and gradient border.
• Scaling factor: all measurements are multiplied by s = W / 1080, so every format renders at the correct proportions regardless of absolute pixel count.
• Debounced live preview: text inputs trigger a 180ms debounced re-render so the canvas updates as you type.

Stack

• Language: Vanilla JavaScript ES5/ES6 (~744 lines)
• Rendering: HTML5 Canvas 2D API
• QR Code: QRCode.js 1.0.0 (loaded from cdnjs CDN)
• Fonts: Google Fonts — Nunito (800/900), Nunito Sans (300/400/600)
• Styling: Pure CSS with custom properties (~337 lines)
• Dependencies: QRCode.js only — no framework, no build step

Usage

1. Open social-poster-generator.html in a browser.
2. Pick a format from the grid (Post, Story, Square, TV, Banner, A4).
3. Choose a preset (Vivo, Institucional, Mínimo) and dark/light mode.
4. Fill in the content fields: label, title, description, URL, CTA, footer.
5. Toggle elements on/off as needed.
6. Click Baixar PNG to download the poster at full resolution.

Click Exemplo to load sample content and see the system in action.

No API keys or server required. Everything runs client-side.