πŸ₯ž
Glif Docs/Guide
  • Getting Started
    • πŸ‘‹What is Glif?
    • πŸ’‘What can I do with a glif?
      • πŸƒRun a glif
      • πŸ”ŒBuild a glif
      • πŸ”€Remix a glif
      • πŸ—£οΈComment on a glif
      • πŸ”³Embed a glif
    • βš’οΈHow do I build a glif?
      • πŸ“½οΈVideo tutorial: Building a simple image generator
      • 🟰Using variables
    • βš™οΈProfile Settings
    • πŸͺ™Credits and Payments
    • ❓FAQs
  • Blocks
    • πŸ™‹Inputs
      • ✍️Text Input Block
      • πŸ–ΌοΈImage Input Block
      • πŸ“‹Multipick Block
    • πŸͺ„Generators
      • πŸ“ƒText Block
      • πŸ–ΌοΈImage Block
      • ➑️Image to Text Block
        • Florence2Sam2Segmenter
    • 🧰Tools
      • πŸ”€Text Combiner Block
      • πŸ”¬JSON Extractor Block
    • πŸ’…Styling
      • 🎨HTML Block
      • πŸ–ΌοΈCanvas Block
    • πŸ§‘β€πŸ”¬Advanced/Experimental
      • πŸŽ™οΈAudio Input Block
      • ↔️Glif Block
      • 🌐Web Fetcher Block
      • πŸ”ŠAudio Spell
      • 🧱ComfyUI Block
      • πŸ“‘Audio to Text Block
      • πŸŽ₯Video Input Block
      • πŸ”§JSON Repair Block
  • Apps
    • 🎨Glif It! Browser Extension
  • Glif University
    • πŸŽ₯Video Tutorials
      • 🐲How To: D&D Character Sheet Generator
      • 🧠How To: Expanding Brain Meme Generator
      • πŸ¦‘How To: Occult Memelord Generator
      • πŸ₯ΈHow To: InstantID Portrait Restyle Glif
      • πŸ•ΊHow To: Style and Pose a Character with InstantID + Controlnet
      • 😱How To: Create a Simple Cartoon Portrait Animation Glif (LivePortrait + Custom Blocks)
      • πŸ‘—How to Create a Clothing Restyler App (IP Adapter, ControlNet + GPT Vision)
      • 🀑How to Create a 4+ Panel Storyboard/Comic (Flux Schnell)
      • πŸŽ‚How to Create a Recipe Generator with Accompanying Pictures
      • How to Use JasperAI Depth Controlnet on Flux Dev
      • πŸ¦Έβ€β™‚οΈHow to Make a Consistent Comic Panel Generator
    • πŸ§‘β€πŸ«Prompt Engineering 101
    • πŸ–ΌοΈControlNet
    • πŸ“šAI Glossary
  • API - for Developers
    • ⚑Running glifs via the API
    • πŸ€–Using AI Assistants to build with the Glif API
    • πŸ“™Reading & writing data via the API
    • πŸ—ΎGlif Graph JSON Schema
    • πŸ“«Embed player & custom webpages
    • πŸ“«Sample code
    • ❓What can I make with the Glif API?
      • Browser Extensions
      • Discord Bots
      • Games
      • Social Media Bots
      • Experimental Projects
  • Policies
    • πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦Community Guidelines
  • Programs
    • πŸ–ΌοΈLoradex Trainer Program
  • Community Resources
    • πŸ§‘β€πŸ€β€πŸ§‘Resources Created by Glif Community Members
  • Contact Us
    • πŸ“£Send us your feedback
    • πŸš”Information for law enforcement
Powered by GitBook
On this page
  1. Blocks
  2. Styling

Canvas Block

The Canvas block lets you easily layout and design your glif's outputs into a final look.

PreviousHTML BlockNextAdvanced/Experimental

Last updated 11 months ago

To get started, add the Canvas block under in the and click β€œOpen Canvas.”

To add and edit output from other blocks:

  • Click on the text or image icon in the menu bar.

  • Click Source.

  • Select the variable name you'd like to add as a layer.

To change the canvas size:

  • Drag the edges of the canvas to change its dimensions OR click β€œCanvas” in the menu bar and manually enter its width and height in pixels.

To change the canvas color:

  • Click β€œCanvas” in the menu bar and click on the color swatch to select a new color OR manually enter the color hex value.

To add and edit text:

  • To add new text, click the text icon in the menu bar and type in the text field within the canvas.

  • To add text from an existing block, click "Source" and select its variable name.

  • To edit existing text, click the text icon in the menu bar and change your text's font, size, color, and format.

To add and edit images:

  • Click the image icon in the menu bar and click on β€œSource” to upload an image from your device, select a variable from other blocks, or add an image via a URL.

  • Select an object fit option: Stretch, Contain, or Cover.

  • Optionally give the image rounded corners by changing its border radius.

To edit and reposition layers:

  • Click the picture or text option in the menu bar and select from the options to Move to Front, Move to Back, or Duplicate Layer.

  • Click on the lock icon to lock and unlock layers.

πŸ’…
πŸ–ΌοΈ
Styling
builder