Canvas Drawing
Pop’s Canvas provides a flexible, infinitely scalable visual creation environment, ideal for:
- Flowcharts and structural diagrams
- Architecture design and system decomposition
- Sketches, diagrams, whiteboard notes
- UI / product prototype drafts
- Visual brainstorming and ideation
The Canvas includes infinite canvas, rich style controls, layers, an asset library, export tools, allowing you to efficiently create professional diagrams.
🎨 1. Canvas Interface Structure
The Canvas interface is composed of three main sections:
| Section | Description |
|---|---|
| Left Style Panel | Controls stroke, fill, opacity, corner radius, etc. |
| Top Toolbar | Shapes, arrows, connectors, text, lasso, select, move |
| Right Asset Library | Icons, illustrations, components for drag‑and‑drop |
Layout Overview:
[ Left Style Panel ] ┃ [ Infinite Canvas Area ] ┃ [ Asset Library ]
✏️ 2. Basic Drawing Operations
2.1 Add Basic Shapes
From the top toolbar, you can create:
| Shape Type | Usage |
|---|---|
| Rectangle / Rounded Rectangle | Flow nodes, modules |
| Circle / Ellipse | Concepts, key points |
| Arrow | Flow direction |
| Connector Line | Link between nodes |
| Text | Titles, descriptions |
| Freehand Line | Sketches, annotations |
| Asset Icons | Drag from the right library |
Common actions:
- Move: drag directly
- Copy:
Cmd/Ctrl + C - Paste:
Cmd/Ctrl + V - Delete:
Delete / Backspace - Multi-select: drag to select or hold
Shift - Proportional resize: hold
Shiftwhile resizing
🎨 3. Left Style Panel
The Style Panel controls visual attributes of selected elements.
3.1 Stroke
- Stroke color (theme colors included)
- Stroke width: thin / medium / thick
- Stroke styles: solid, dashed, dotted
- Line style: smooth, straight, hand‑drawn
3.2 Fill
- Solid fill
- Semi‑transparent fill
- Gradient fill (supported for some assets)
- No fill (transparent)
3.3 Corner Radius
For rectangles:
- Sharp corners
- Medium rounded
- Large rounded (iOS‑like style)
3.4 Opacity
Adjust opacity from 0% to 100%.
📚 4. Layer Management
For complex drawings, layer control helps manage visual order.
Supported actions:
- Bring to front
- Send to back
- Move up one layer
- Move down one layer
- Lock element (avoid accidental moves)
Layer management is essential for large diagrams.
🧭 5. Canvas View
The Canvas uses an infinite workspace suitable for anything from small notes to large diagrams.
| Function | Operation |
|---|---|
| Zoom | Mouse wheel / trackpad pinch |
| Pan | Hold spacebar + drag |
| Reset view | Button next to 100% indicator |
| Zoom control | + / - buttons at lower-left corner |
The canvas expands without limits—no edge constraints.
🧩 6. Asset Library
The right side provides professional icon sets:
- Tech icons (React / Vue / Python / LinkedIn / GitHub / Docker, etc.)
- Flowchart nodes
- Illustrations
- Decorative icons
You can:
- Drag directly onto the canvas
- Favorite items to personal library
- Browse extended resources
All assets are vector-based for high-quality rendering.
📤 7. Export Options
After finishing your design, export options are available in the top-right menu:
| Format | Use Case |
|---|---|
| PNG | Transparent background, suitable for reports, documents |
| SVG | High-quality vector for further design editing |
| JSON | Project file for re-import into Pop Canvas |
📝 8. Tips & Recommendations
- Press Enter to quickly add text
- Use alignment tools for clean layouts
- Lock background items to avoid accidental selections
- Use asset icons instead of hand-drawn shapes for professional output
- Group complex structures for better organization
Pop’s online canvas is ideal for diagramming, planning, system design, and creative brainstorming.