Solid Colour
Fill shapes and backgrounds with a single, uniform colour. Perfect for clean, simple designs.
How to Use
-
1
Select the Fill Tool
Click on the fill tool icon in the toolbar to activate it. The cursor will change to indicate the tool is ready.
-
2
Choose Your Colour or Gradient
Select a solid colour from the colour palette or activate gradient mode to create multi-colour fills. Gradients offer horizontal, vertical, and diagonal directions.
-
3
Click to Fill
Click directly on any shape to fill it instantly. For the canvas background, click on empty space or use the "Fill background" button in the tool context menu.
-
4
Refill as Needed
Change your colour selection and click shapes again to update their fills. Each fill action is saved in history and can be undone with Ctrl+Z or â+Z.
Fill Modes
Gradient Fill
Create smooth transitions between colours with gradients. Available for all shapes except the canvas background.
Supported Shapes
Rectangles
Circles
Ellipses and Ovals
Polygons
Pencil Drawings and Paths
Text Elements
Lines (Stroke Fill)
Canvas Background
Special Features
One-Click Filling
Just click once on any shape to fill it instantly. No dragging or complex selections needed.
Gradient Support for Shapes
Apply beautiful gradients to any shape. Create horizontal, vertical, or diagonal gradients with multiple colours.
Solid Background Fill
Click on empty canvas or use the "Fill Background" button to set solid background colours.
Fill Transparent Shapes
Works on shapes with no fill â the tool detects shape boundaries automatically using advanced algorithms.
Change Fills Anytime
Click a filled shape again with a new colour or gradient to change it. Experiment freely with different looks.
History Support
Each fill operation is saved in history. Use Ctrl+Z to undo fills and try different colours.
How It Works
Shape Detection
The fill tool uses smart detection to identify fillable elements:
- Direct hit testing: Checks if you clicked directly on a filled shape
- SVG point-in-fill: Uses SVG's built-in hit testing for precise detection
- Boundary detection: Examines shape outlines and stroke areas
- Fallback scanning: Searches nearby elements if direct detection fails
Gradient Creation
Gradients are implemented as SVG linear gradients with:
- Dynamic patterns: Each gradient gets a unique SVG pattern ID
- Multiple colour stops: Support for complex multi-colour gradients
- Direction control: Horizontal, vertical, and diagonal orientations
- Opacity support: Individual stop opacity for advanced effects
Background Handling
Background fills use a special large rectangle that automatically resizes based on the current viewport and zoom level to ensure complete coverage.
Quick Tips
Undo last fill:
Ctrl+Z or â+Z
Fill a shape:
Click directly on the shape
Fill background:
Click on empty canvas or use context button
Switch colours quickly:
Change colour in palette, then click shapes to refill
Common Questions
Why can't I fill the background with a gradient?
This is by design. Backgrounds only accept solid colours to maintain good performance and visual clarity. Gradients are reserved for individual shapes and objects.
The fill tool isn't detecting my shape. What's wrong?
Try clicking closer to the shape's edge or outline. Some complex paths might need more precise clicking. Make sure the shape is actually in the drawing layer and not part of the interface.
Can I fill text with gradients?
Yes! Text elements can be filled with both solid colours and gradients, just like any other shape.
How do I remove a fill from a shape?
You can change the fill to a different colour, but there's currently no "transparent" fill option. Use your background colour to effectively remove fills.
Why do some shapes fill differently than others?
Different shape types (rectangles, circles, paths) may have different fill behaviours based on their SVG properties. The tool adapts to each shape type automatically.