Background & Canvas Settings - Complete Guide
Background & Canvas Settings - Complete Guide
Learn how to configure your canvas dimensions, choose board styles, and customize background colors in Scribe Animator. This guide covers the Canvas Settings panel accessible from the toolbar.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬───────────────────────────────────────────────┬────────────────┤
│ │ │ │
│ LEFT │ │ RIGHT │
│ SIDEBAR │ CANVAS AREA │ SIDEBAR │
│ │ │ │
│ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ [D] [T] [🖼️] ... ┌─────┐ │ │ │
│ │ │ Canvas Toolbar │ ⚙️ │◄─── Settings │ │ │
│ │ └────────────────────┴─────┴──────────────┘ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ Your Animation │ │ │
│ │ │ Canvas │ │ │
│ │ │ │ │ │
│ │ │ (Background color and │ │ │
│ │ │ board style visible) │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ │ │
├────────────┴───────────────────────────────────────────────┴────────────────┤
│ TIMELINE │
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Canvas Settings Access:
- Canvas Toolbar → ⚙️ Settings — Opens the Canvas Settings panel
Quick Start: Opening Canvas Settings
Method 1: Toolbar Button (Recommended)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Look at the │ │ Click the │ │ Settings │
│ canvas │ ───► │ ⚙️ Settings │ ───► │ panel opens │
│ toolbar │ │ button │ │ (draggable) │
└──────────────┘ └──────────────┘ └──────────────┘
Method 2: Keyboard Shortcut
Press Escape to close the panel when open.
tip
The Canvas Settings panel is draggable! Click and drag the header to reposition it anywhere on screen without blocking your canvas work.
Canvas Settings Panel
When you click the ⚙️ Settings button, the Canvas Settings panel appears.
Panel Layout Overview
┌──────────────────────────────────────────────────────────────┐
│ Canvas Settings [×] │
│ Size, board style, and advanced performance. │
├──────────────────────────────────────────────────────────────┤
│ │
│ CANVAS SIZE │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ YouTube (16:9) │ │ Square (1:1) │ │
│ │ 1920 × 1080 │ │ 1080 × 1080 │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ Vertical (9:16) │ │ Widescreen (21:9) │ │
│ │ 1080 × 1920 │ │ 2560 × 1080 │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ HD (4:3) │ │
│ │ 1440 × 1080 │ │
│ └──────────────────────┘ │
│ ─────────────────────────────────────────────────────────── │
│ Custom Size │
│ Width: [_____] × Height: [_____] │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ BOARD STYLE │
│ ┌──────────────────────────────────────────┐ │
│ │ [██] Whiteboard │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ [▓▓] Chalkboard (Dark) with chalk │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ [▓▓] Chalkboard (Green) with chalk │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ [░░] Glassboard with glass │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ [▒▒] Custom Color │ │
│ └──────────────────────────────────────────┘ │
│ │
│ (When Custom selected:) │
│ Custom Background Color │
│ [🎨 color-picker] [#ffffff ] │
│ │
├──────────────────────────────────────────────────────────────┤
│ [▼ Advanced] (Development mode only) │
└──────────────────────────────────────────────────────────────┘
Canvas Size Presets
Choose from popular aspect ratios optimized for different platforms.
Available Presets
| Preset | Dimensions | Aspect Ratio | Best For |
|---|---|---|---|
| YouTube (16:9) | 1920 × 1080 | 16:9 | YouTube, Vimeo, standard video |
| Square (1:1) | 1080 × 1080 | 1:1 | Instagram posts, social media |
| Vertical (9:16) | 1080 × 1920 | 9:16 | TikTok, Instagram Reels, Stories |
| Widescreen (21:9) | 2560 × 1080 | 21:9 | Cinematic presentations |
| HD (4:3) | 1440 × 1080 | 4:3 | Traditional presentations |
Preset Selection Visual
Current Selection: YouTube (16:9)
┌────────────────────────────────────────────────────────────────────────────┐
│ │
│ 1920 × 1080 pixels │
│ │
│ ┌───────────────────────────────┐ │
│ │ │ │
│ │ Your Canvas Area │ │
│ │ │ │
│ │ 16:9 Aspect Ratio │ │
│ │ │ │
│ └───────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Aspect Ratio Comparison:
16:9 (YouTube) 1:1 (Square) 9:16 (Vertical)
┌─────────────────┐ ┌─────────────┐ ┌─────────┐
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
└─────────────────┘ │ │ │ │
│ │ │ │
└─────────────┘ │ │
│ │
│ │
│ │
└─────────┘
tip
Choose your canvas size before adding content. Changing dimensions after adding objects may require repositioning elements.
note
The YouTube (16:9) preset at 1920×1080 is the most versatile choice for standard video content and online tutorials.
Custom Canvas Size
For specific requirements, enter custom width and height values.
Custom Size Input
Custom Size Section:
─────────────────────────────────────────────────
Width Height
┌────────────────┐ ┌────────────────┐
│ 1920 │ × │ 1080 │
└────────────────┘ └────────────────┘
Enter any pixel values. Changes apply immediately.
Custom Size Workflow
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click in │ │ Enter new │ │ Canvas │
│ Width or │ ───► │ dimension │ ───► │ resizes │
│ Height field │ │ value │ │ immediately │
└──────────────┘ └──────────────┘ └──────────────┘
warning
Setting very large canvas sizes (e.g., 4K at 3840×2160) may impact performance on slower devices. Recommended maximum is 1920×1080 for smooth editing.
Validation Rules
| Property | Minimum | Maximum | Default |
|---|---|---|---|
| Width | 100 px | 7680 px | 1920 px |
| Height | 100 px | 4320 px | 1080 px |
Board Styles
Board styles define the visual appearance and texture of your canvas background.
Available Board Styles
| Style | Color | Texture | Use Case |
|---|---|---|---|
| Whiteboard | #ffffff | None | Clean, professional presentations |
| Chalkboard (Dark) | #2d3748 | Chalk | Educational, retro classroom feel |
| Chalkboard (Green) | #2f855a | Chalk | Classic school chalkboard look |
| Glassboard | #f7fafc | Glass | Modern, sleek corporate style |
| Custom Color | User-defined | None | Full customization |
Board Style Visual Comparison
Whiteboard Chalkboard (Dark) Chalkboard (Green)
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ ░░░░░░░░░░░░░░░ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
│ ░░░ #ffffff ░░░ │ │ ▓▓▓ #2d3748 ▓▓▓ │ │ ▒▒▒ #2f855a ▒▒▒ │
│ ░░░ Clean ░░░ │ │ ▓▓▓ Dark ▓▓▓ │ │ ▒▒▒ Green ▒▒▒ │
│ ░░░░░░░░░░░░░░░ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
+ with chalk texture + with chalk texture
Glassboard Custom Color
┌─────────────────┐ ┌─────────────────┐
│ ░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░ │
│ ░░░ #f7fafc ░░░ │ │ ░░░ Any hex ░░░ │
│ ░░░ Light ░░░ │ │ ░░░ You want░░░ │
│ ░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░ │
└─────────────────┘ └─────────────────┘
+ with glass texture (no texture)
tip
Whiteboard is perfect for most use cases. Use Chalkboard styles when creating educational content with a classroom feel.
Custom Background Color
When you select Custom Color as the board style, additional color controls appear.
Color Picker Interface
Custom Background Color Section:
─────────────────────────────────────────────────
┌────────────────────────────────────────────────┐
│ │
│ [🎨] [#3b82f6 ] │
│ ▲ ▲ │
│ │ │ │
│ │ └── Hex color input field │
│ │ │
│ └── Native color picker (click to open) │
│ │
└────────────────────────────────────────────────┘
Color Input Methods
Method 1: Visual Color Picker Method 2: Hex Code Input
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ Click the color swatch │ │ Type hex code directly │
│ │ │ │
│ [🎨] ← Click here │ │ [#ff5722 ] │
│ │ │ │
│ System color picker opens │ │ Supports 3 or 6 digit hex │
│ │ │ Examples: │
│ Select any color visually │ │ #f00 (red) │
└─────────────────────────────┘ │ #3b82f6 (blue) │
└─────────────────────────────┘
Popular Background Colors
| Color | Hex Code | Use Case |
|---|---|---|
| Pure White | #ffffff | Clean, minimal |
| Light Gray | #f3f4f6 | Soft, professional |
| Cream | #fef3c7 | Warm, inviting |
| Navy Blue | #1e3a5f | Corporate, serious |
| Dark Gray | #1f2937 | Dark mode, cinematic |
| Pastel Blue | #dbeafe | Calm, educational |
note
Changes apply immediately as you pick colors. There's no Apply button — what you see is what you get!
Color Format Validation
| Format | Valid | Example |
|---|---|---|
| 6-digit hex | ✅ Yes | #3b82f6 |
| 3-digit hex | ✅ Yes | #f00 |
| RGB | ❌ No | rgb(59, 130, 246) |
| Named colors | ❌ No | blue |
warning
Only hex color codes are supported. RGB, HSL, and named colors will not work. Use a hex converter if needed.
Settings Persistence
All canvas settings are automatically saved to your project.
What Gets Saved
Project Settings Structure:
─────────────────────────────────────────────────
{
"width": 1920, ← Canvas width
"height": 1080, ← Canvas height
"boardStyle": "custom", ← Selected board style
"backgroundColor": "#3b82f6" ← Custom color (if applicable)
}
Settings Lifecycle
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Change │ │ Project │ │ Settings │
│ Setting │────►│ Auto-saves │────►│ Restored on │
│ in Panel │ │ to Memory │ │ Next Load │
└──────────────┘ └──────────────┘ └──────────────┘
tip
Settings are saved to your project file. When you export and share your project, recipients will see the same canvas size and background you configured.
Advanced Settings (Debug Mode)
In development mode, additional advanced options are available.
Vector Processor Worker
┌──────────────────────────────────────────────────────────────┐
│ [▼ Advanced] │
├──────────────────────────────────────────────────────────────┤
│ │
│ [✓] Vector processor worker │
│ Faster imports; reduces UI jank. │
│ │
│ Runs SVG import and tracing on a background worker. │
│ Disable to debug the synchronous pipeline. │
│ │
└──────────────────────────────────────────────────────────────┘
note
Advanced settings are only visible in development mode (non-production builds). Regular users won't see these options.
Panel Interaction
Dragging the Panel
Drag Behavior:
─────────────────────────────────────────────────
┌─── Drag Handle (Header Bar) ───┐
│ Canvas Settings [×] │ ← Click and drag here
├────────────────────────────────┤
│ │
│ ... settings content ... │ ← Cannot drag from here
│ │
└────────────────────────────────┘
The panel can be moved anywhere on screen:
Before Drag: After Drag:
┌────────────────┐ ┌─────────┐ ┌─────────┐ ┌────────────────┐
│ │ │ Panel │ │ Panel │ │ │
│ Canvas │ │ (right) │ → │ (left) │ │ Canvas │
│ │ └─────────┘ └─────────┘ │ │
└────────────────┘ └────────────────┘
Closing the Panel
| Method | Action |
|---|---|
| × button | Click the close button in the header |
| Escape key | Press Esc anywhere while panel is open |
| Click outside | Not supported (panel is non-modal) |
tip
The panel is non-modal — you can interact with the canvas while the settings panel is open. This allows real-time preview of your changes!
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Escape | Close the Canvas Settings panel |
Common Workflows
Workflow 1: Set Up for YouTube Video
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Open Canvas │ │ Click │ │ Select │
│ Settings │ ───► │ "YouTube │ ───► │ "Whiteboard" │
│ (⚙️) │ │ (16:9)" │ │ style │
└──────────────┘ └──────────────┘ └──────────────┘
│
▼
1920 × 1080
Ready for YouTube!
Workflow 2: Create Educational Chalkboard Video
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Open Canvas │ │ Select │ │ Click │
│ Settings │ ───► │ YouTube │ ───► │ "Chalkboard │
│ (⚙️) │ │ (16:9) │ │ (Green)" │
└──────────────┘ └──────────────┘ └──────────────┘
│
▼
Green chalkboard
with chalk texture!
Workflow 3: Create Instagram Reel
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Open Canvas │ │ Click │ │ Choose │
│ Settings │ ───► │ "Vertical │ ───► │ "Custom │
│ (⚙️) │ │ (9:16)" │ │ Color" │
└──────────────┘ └──────────────┘ └──────────────┘
│ │
▼ ▼
1080 × 1920 Pick brand color
Portrait mode! for background
Troubleshooting
Panel Not Opening
| Issue | Solution |
|---|---|
| Settings button not visible | Ensure you're in the main editor view, not preview mode |
| Panel appears off-screen | Refresh the page; panel position resets on reload |
Color Changes Not Applying
| Issue | Solution |
|---|---|
| Custom color not visible | Ensure "Custom Color" board style is selected |
| Hex code not working | Use format #RRGGBB (e.g., #3b82f6), not RGB |
Canvas Size Issues
| Issue | Solution |
|---|---|
| Objects outside canvas | Manually reposition objects after resizing |
| Performance slow | Reduce canvas size; 1920×1080 is optimal |
warning
Changing canvas size does not automatically reposition existing objects. You may need to manually adjust element positions after resizing.
Best Practices
Choosing Canvas Size
- Decide platform first — YouTube, Instagram, TikTok have different requirements
- Use presets when possible — They're optimized for common use cases
- Set size before adding content — Avoid repositioning work later
Choosing Board Style
- Match your content — Educational → Chalkboard, Corporate → Whiteboard/Glassboard
- Consider text contrast — Dark backgrounds need light text colors
- Test before committing — Preview your animation with the chosen style
Custom Colors
- Use brand colors — Maintain visual consistency with your brand
- Ensure contrast — Text and graphics should stand out from background
- Test on different displays — Colors may appear differently on various screens
tip
Pro tip: Save your preferred settings as a project template to quickly start new projects with consistent canvas size and background!
Summary
| Feature | Location | Purpose |
|---|---|---|
| Canvas Size | Settings Panel → Top | Set video dimensions and aspect ratio |
| Board Style | Settings Panel → Middle | Choose visual style and texture |
| Custom Color | Settings Panel → Board Style | Define exact background color |
| Advanced | Settings Panel → Bottom | Debug options (dev mode only) |
The Canvas Settings panel provides all the tools you need to configure your animation's foundation. Set your canvas size for your target platform, choose a board style that matches your content's tone, and customize colors to align with your brand.
Related Documentation:
- Typography Text Guide — For adding and styling text
- Images & Vectors Guide — For importing visual assets
- Export Settings — For rendering your final video