Activity 14: Drawing Canvas - SOLUTION

Complete implementation of touch-based drawing with SVG path rendering.

🚀 Quick Start

One. Install Dependencies

npm install --legacy-peer-deps

2. Start Development Server

npx expo start

3. Open on Device

• Phone: Scan QR code with Expo Go app
• Web: Press w in terminal
• iOS Simulator: Press i (Mac only)
• Android Emulator: Press a

✅ What's Implemented

Solution #1: Touch Start Handler

const handleTouchStart = (evt) => {
  const { locationX, locationY } = evt.nativeEvent;

  const newStroke = {
    points: [{ x: locationX, y: locationY }]
  };

  setCurrentStroke(newStroke);
};

Key Concepts:

• Extract touch coordinates from event.nativeEvent
• Initialize stroke with first point
• Store in currentStroke state for real-time rendering

Solution #2: Touch Move Handler

const handleTouchMove = (evt) => {
  if (!currentStroke) return;

  const { locationX, locationY } = evt.nativeEvent;

  const updatedStroke = {
    ...currentStroke,
    points: [...currentStroke.points, { x: locationX, y: locationY }]
  };

  setCurrentStroke(updatedStroke);
};

Key Concepts:

• Guard against null currentStroke
• Append new points to existing array
• Create new object to trigger React re-render

Solution #3: Touch End Handler

const handleTouchEnd = () => {
  if (!currentStroke || currentStroke.points.length === 0) return;

  setStrokes([...strokes, currentStroke]);
  setCurrentStroke(null);
};

Key Concepts:

• Validate stroke has points
• Add to permanent strokes array
• Reset currentStroke to null

📚 Technical Insights

SVG Path Data Format

M x,y    → Move to first point
L x,y    → Line to next point
L x,y    → Line to next point
...

Example: M 10,20 L 30,40 L 50,30 creates a path with 3 points

State Management Pattern

strokes:        [{points: [...]}, {points: [...]}]  // Completed
currentStroke:  {points: [...]}                      // In progress

Touch Event Properties

• locationX / locationY: Position relative to the component
• pageX / pageY: Position relative to the screen
• Use locationX/Y for canvas-relative drawing

🎯 Features Implemented

• ✅ Touch-to-draw functionality
• ✅ Real-time stroke rendering
• ✅ Multi-stroke support
• ✅ Undo last stroke
• ✅ Clear canvas with confirmation
• ✅ Smooth line rendering with round caps/joins
• ✅ Empty state messaging
• ✅ Stroke count display

💡 Extension Ideas

Color Picker Implementation

const [strokeColor, setStrokeColor] = useState('#000');

<Path
  stroke={strokeColor}
  // ... other props
/>

Thickness Slider

const [strokeWidth, setStrokeWidth] = useState(3);

<Slider
  value={strokeWidth}
  onValueChange={setStrokeWidth}
  minimumValue={1}
  maximumValue={10}
/>

Save to Gallery

import * as MediaLibrary from 'expo-media-library';
import ViewShot from 'react-native-view-shot';

const viewShotRef = useRef();

const saveDrawing = async () => {
  const uri = await viewShotRef.current.capture();
  await MediaLibrary.saveToLibraryAsync(uri);
};

🐛 Troubleshooting

Issue: Lines appear disconnected Solution: Ensure points are added frequently in handleTouchMove

Issue: Performance lag with many strokes Solution: Consider limiting stroke history or implementing path simplification

Issue: Drawing offset on web Solution: Use locationX/locationY instead of pageX/pageY

🎨 Real-World Applications

1. Digital Signatures: DocuSign, Adobe Sign
2. Note-Taking: GoodNotes, Notability, OneNote
3. Creative Tools: Procreate Pocket, Adobe Fresco
4. Annotation: PDF markup, screenshot annotation
5. Education: Math problem solving, whiteboard apps
6. Healthcare: Medical form signatures, patient consent

📊 Performance Considerations

• Point Throttling: Add points every N milliseconds instead of every move
• Path Simplification: Remove intermediate points that don't affect visual appearance
• Memoization: Use React.memo for stroke components
• Virtual Canvas: Only render visible strokes for large drawings

🧪 Testing Tips

1. Test on actual device for accurate touch response
2. Try drawing fast and slow strokes
3. Test undo/clear functionality with various stroke counts
4. Verify state persistence across component re-renders
5. Check performance with 50+ strokes

Activity 14 Solution | M1: Mobile Foundations | React Native & Expo SDK 53