Canvas Tools

The Canvelete (opens in a new tab) Design Editor provides a comprehensive set of tools for creating, editing, and manipulating design elements. This guide covers all available tools and their advanced features.

Selection Tools

Select Tool (V)

The primary tool for selecting and manipulating elements on the canvas.

Basic Selection

• Single Click: Select individual elements
• Drag Selection: Draw a selection box around multiple elements
• Shift+Click: Add elements to current selection
• Ctrl+Click: Toggle element selection (add/remove from selection)

Transform Operations

When elements are selected, you can:

• Move: Drag elements to new positions
• Resize: Drag corner handles to scale proportionally
• Rotate: Drag rotation handle (appears above selection)
• Skew: Hold Ctrl while dragging side handles

Smart Features

• Smart Guides: Automatic alignment suggestions appear as you move elements
• Snap to Grid: Elements snap to grid intersections when enabled
• Snap to Elements: Align with edges and centers of other elements
• Distance Indicators: Shows spacing between elements during movement

Hand Tool (H)

Navigate around the canvas without affecting your selection.

Navigation Methods

• Click and Drag: Pan around the canvas
• Spacebar: Temporarily activate hand tool while held
• Mouse Wheel: Zoom in/out at cursor position
• Ctrl+Mouse Wheel: Horizontal scrolling

Shape Tools

Rectangle Tool (R)

Create rectangular shapes, frames, and containers.

Drawing Rectangles

• Click and Drag: Draw rectangle from corner to corner
• Shift+Drag: Create perfect squares
• Alt+Drag: Draw from center outward
• Shift+Alt+Drag: Create perfect square from center

Rectangle Properties

• Corner Radius: Create rounded rectangles
• Individual Corners: Set different radius for each corner
• Fill Options: Solid colors, gradients, images, or patterns
• Stroke Settings: Border color, width, and style

Circle Tool (C)

Draw circles, ellipses, and curved shapes.

Drawing Circles

• Click and Drag: Create ellipse
• Shift+Drag: Create perfect circle
• Alt+Drag: Draw from center
• Shift+Alt+Drag: Perfect circle from center

Circle Properties

• Arc Settings: Create partial circles and arcs
• Start/End Angles: Define arc sweep
• Fill and Stroke: Same options as rectangles
• Pie Charts: Create segmented circles for data visualization

Line Tool (L)

Draw straight lines, arrows, and connectors.

Line Types

• Straight Lines: Basic line segments
• Arrows: Lines with arrowheads
• Connectors: Lines that snap to element edges
• Dimension Lines: Lines with measurement labels

Line Properties

• Stroke Width: Line thickness
• Stroke Style: Solid, dashed, dotted patterns
• End Caps: Round, square, or arrow caps
• Line Joins: Miter, round, or bevel joins

Custom Shapes

Access additional geometric shapes through the shapes dropdown.

Available Shapes

• Triangle: Equilateral and custom triangles
• Star: 5-point stars and custom polygons
• Pentagon: Regular pentagons and polygons
• Hexagon: Six-sided shapes
• Arrow Shapes: Various arrow styles
• Speech Bubbles: Callout shapes with tails

Content Tools

Text Tool (T)

Add and edit text elements with advanced typography controls.

Creating Text

• Click: Create text at cursor position
• Click and Drag: Create text box with defined width
• Double-click Text: Enter edit mode for existing text

Text Formatting

• Font Selection: Choose from system fonts and Google Fonts
• Font Size: Adjustable from 8px to 500px
• Font Weight: Thin, light, regular, medium, bold, black
• Font Style: Normal, italic, oblique

Advanced Typography

• Line Height: Control spacing between lines
• Letter Spacing: Adjust character spacing
• Word Spacing: Control space between words
• Text Alignment: Left, center, right, justify
• Vertical Alignment: Top, middle, bottom

Text Effects

• Text Shadow: Drop shadows with blur and offset
• Text Stroke: Outline text with custom colors
• Text Fill: Gradients and patterns for text
• Text Transform: Uppercase, lowercase, capitalize

Image Tool (I)

Upload, place, and manipulate images in your designs.

Adding Images

• Click: Open file browser to select image
• Drag and Drop: Drop images directly onto canvas
• Paste: Paste images from clipboard (Ctrl+V)
• Asset Library: Choose from uploaded assets

Image Manipulation

• Crop: Adjust image boundaries and aspect ratio
• Resize: Scale images while maintaining quality
• Rotate: Rotate images in any direction
• Flip: Horizontal and vertical flipping

Image Effects

• Filters: Brightness, contrast, saturation, hue
• Blur: Gaussian blur effects
• Opacity: Transparency controls
• Blend Modes: Multiply, screen, overlay, and more

Image Formats

• Supported Formats: JPG, PNG, GIF, SVG, WebP
• Vector Images: SVG files maintain scalability
• Animated GIFs: Preserve animation in exports
• High Resolution: Support for high-DPI images

Drawing Tools

Pen Tool (P)

Create custom vector paths and complex shapes.

Path Creation

• Click: Create straight line segments
• Click and Drag: Create curved Bezier segments
• Close Path: Click on starting point to close shape
• Open Paths: Leave paths open for lines and strokes

Bezier Controls

• Control Handles: Adjust curve direction and intensity
• Convert Points: Switch between corner and smooth points
• Add Points: Insert new points along existing paths
• Delete Points: Remove unnecessary path points

Path Editing

• Direct Selection: Edit individual path points
• Path Operations: Union, subtract, intersect paths
• Stroke to Path: Convert strokes to editable paths
• Simplify: Reduce path complexity automatically

Brush Tool

Freehand drawing and sketching capabilities.

Brush Settings

• Brush Size: Adjustable from 1px to 100px
• Brush Hardness: Soft or hard brush edges
• Opacity: Brush transparency
• Flow: Paint application rate

Drawing Modes

• Normal: Standard brush painting
• Erase: Remove parts of existing elements
• Blend: Mix colors with underlying elements
• Pattern: Paint with custom patterns

Advanced Manipulation

Multi-Selection Operations

Work with multiple elements simultaneously.

Selection Methods

• Drag Selection: Draw box around elements
• Shift+Click: Add to selection
• Ctrl+A: Select all elements
• Select Similar: Choose elements with similar properties

Group Operations

• Group (Ctrl+G): Combine elements into single unit
• Ungroup (Ctrl+Shift+G): Separate grouped elements
• Enter Group: Edit elements within group
• Exit Group: Return to main canvas level

Alignment and Distribution

Precisely position multiple elements.

Alignment Options

• Align Left: Align to leftmost element
• Align Center: Center horizontally
• Align Right: Align to rightmost element
• Align Top: Align to topmost element
• Align Middle: Center vertically
• Align Bottom: Align to bottommost element

Distribution Options

• Distribute Horizontally: Even horizontal spacing
• Distribute Vertically: Even vertical spacing
• Distribute Centers: Even spacing between centers
• Distribute Edges: Even spacing between edges

Transform Operations

Advanced transformation capabilities.

Numeric Transforms

• Position: Exact X,Y coordinates
• Size: Precise width and height values
• Rotation: Exact angle in degrees
• Scale: Proportional or non-proportional scaling

Transform Origin

• Center Point: Default rotation and scale center
• Custom Origin: Set custom transformation center
• Corner Origins: Transform from specific corners
• Edge Origins: Transform from edge midpoints

Tool Shortcuts and Efficiency

Keyboard Shortcuts

Essential shortcuts for faster workflow:

V - Select Tool
H - Hand Tool
R - Rectangle Tool
C - Circle Tool
T - Text Tool
I - Image Tool
L - Line Tool
P - Pen Tool

Spacebar - Temporary Hand Tool
Shift - Constrain proportions
Alt - Draw from center
Ctrl - Precision mode

Context-Sensitive Menus

Right-click for tool-specific options:

• Element Properties: Quick access to common settings
• Transform Options: Flip, rotate, scale operations
• Layer Operations: Bring forward, send back, duplicate
• Clipboard Actions: Copy, paste, cut operations

This comprehensive guide covers all the tools available in the Canvelete Design Editor. Master these tools to create professional designs efficiently and effectively.

Next Steps

• Learn about Layer Management for organizing complex designs
• Explore Collaboration features for team workflows
• Check out Dynamic Elements for creating data-driven designs
• Start designing at canvelete.com/dashboard (opens in a new tab)