Canvas Design
Create visually striking static designs using HTML Canvas or Python imaging libraries.
Design Principles
Composition
- Rule of Thirds: Place key elements along grid lines
- Visual Hierarchy: Size, color, and position indicate importance
- White Space: Embrace negative space for elegance
- Balance: Symmetrical for formal, asymmetrical for dynamic
Color Theory
- Complementary: Colors opposite on wheel (high contrast)
- Analogous: Adjacent colors (harmonious)
- Triadic: Three equidistant colors (vibrant)
- Limit palette to 3-5 colors
Typography
- Pair one display font with one body font
- Maintain consistent hierarchy
- Ensure readability (contrast, size)
Python Canvas (Pillow + Cairo)
from PIL import Image, ImageDraw, ImageFont
import cairo
# Create canvas
width, height = 1200, 800
surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
ctx = cairo.Context(surface)
# Background gradient
pattern = cairo.LinearGradient(0, 0, 0, height)
pattern.add_color_stop_rgb(0, 0.1, 0.1, 0.2)
pattern.add_color_stop_rgb(1, 0.05, 0.05, 0.1)
ctx.set_source(pattern)
ctx.paint()
# Draw shapes
ctx.set_source_rgba(1, 0.3, 0.3, 0.8)
ctx.arc(600, 400, 150, 0, 2 * 3.14159)
ctx.fill()
# Add text
ctx.set_source_rgb(1, 1, 1)
ctx.select_font_face("Sans", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD)
ctx.set_font_size(48)
ctx.move_to(400, 600)
ctx.show_text("Hello Design")
# Save
surface.write_to_png("design.png")
HTML Canvas to Image
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 800;
const ctx = canvas.getContext('2d');
// Draw
ctx.fillStyle = '#1a1a2e';
ctx.fillRect(0, 0, 1200, 800);
ctx.fillStyle = '#e94560';
ctx.beginPath();
ctx.arc(600, 400, 150, 0, Math.PI * 2);
ctx.fill();
// Export
const dataUrl = canvas.toDataURL('image/png');
Design Styles
- Minimalist: Limited colors, lots of whitespace, clean lines
- Brutalist: Raw, bold typography, stark contrasts
- Glassmorphism: Frosted glass effects, subtle borders
- Retro/Vintage: Muted colors, textures, classic typography
- Abstract: Geometric shapes, gradients, artistic composition
1---2name: canvas-design-23description: Create beautiful visual art in .png and .pdf documents using design philosophy. Use when the user asks to create a poster, piece of art, design, or other static visual piece. Creates original visual designs.4license: Apache-2.05---6
7# Canvas Design
8
9Create visually striking static designs using HTML Canvas or Python imaging libraries.
10
11## Design Principles
12
13### Composition
14- **Rule of Thirds**: Place key elements along grid lines
15- **Visual Hierarchy**: Size, color, and position indicate importance
16- **White Space**: Embrace negative space for elegance
17- **Balance**: Symmetrical for formal, asymmetrical for dynamic
18
19### Color Theory
20- **Complementary**: Colors opposite on wheel (high contrast)
21- **Analogous**: Adjacent colors (harmonious)
22- **Triadic**: Three equidistant colors (vibrant)
23- Limit palette to 3-5 colors
24
25### Typography
26- Pair one display font with one body font
27- Maintain consistent hierarchy
28- Ensure readability (contrast, size)
29
30## Python Canvas (Pillow + Cairo)
31
32```python
33from PIL import Image, ImageDraw, ImageFont
34import cairo
35
36# Create canvas
37width, height = 1200, 800
38surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
39ctx = cairo.Context(surface)
40
41# Background gradient
42pattern = cairo.LinearGradient(0, 0, 0, height)
43pattern.add_color_stop_rgb(0, 0.1, 0.1, 0.2)
44pattern.add_color_stop_rgb(1, 0.05, 0.05, 0.1)
45ctx.set_source(pattern)
46ctx.paint()
47
48# Draw shapes
49ctx.set_source_rgba(1, 0.3, 0.3, 0.8)
50ctx.arc(600, 400, 150, 0, 2 * 3.14159)
51ctx.fill()
52
53# Add text
54ctx.set_source_rgb(1, 1, 1)
55ctx.select_font_face("Sans", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD)
56ctx.set_font_size(48)
57ctx.move_to(400, 600)
58ctx.show_text("Hello Design")
59
60# Save
61surface.write_to_png("design.png")
62```
63
64## HTML Canvas to Image
65
66```javascript
67const canvas = document.createElement('canvas');
68canvas.width = 1200;
69canvas.height = 800;
70const ctx = canvas.getContext('2d');
71
72// Draw
73ctx.fillStyle = '#1a1a2e';
74ctx.fillRect(0, 0, 1200, 800);
75
76ctx.fillStyle = '#e94560';
77ctx.beginPath();
78ctx.arc(600, 400, 150, 0, Math.PI * 2);
79ctx.fill();
80
81// Export
82const dataUrl = canvas.toDataURL('image/png');
83```
84
85## Design Styles
86
87- **Minimalist**: Limited colors, lots of whitespace, clean lines
88- **Brutalist**: Raw, bold typography, stark contrasts
89- **Glassmorphism**: Frosted glass effects, subtle borders
90- **Retro/Vintage**: Muted colors, textures, classic typography
91- **Abstract**: Geometric shapes, gradients, artistic composition
majiayu000