File: App.js (handleTouchStart function, line ~50)
When the user touches the canvas, capture the starting point of a new stroke:
javascript
consthandleTouchStart = (event) => {
// TODO #1: Get the touch coordinates from the eventconst { locationX, locationY } = event.nativeEvent;
// TODO #2: Create a new stroke object with the first pointsetCurrentStroke([{ x: locationX, y: locationY }]);
};
Success Criteria:
Extract locationX and locationY from event.nativeEvent
Initialize currentStroke state with first point as x, y object
Touching canvas creates a starting point
Why: locationX/locationY provide canvas-relative coordinates, perfect for drawing!
Expected Behavior: After completing this, touching the canvas will start tracking a stroke (though it won't be visible until Task 2).
As the user drags their finger, continuously add points to create a smooth line:
javascript
consthandleTouchMove = (event) => {
// TODO #1: Check if a stroke is currently being drawnif (!currentStroke) return;
// TODO #2: Get the new touch coordinatesconst { locationX, locationY } = event.nativeEvent;
// TODO #3: Add the new point to the stroke array// IMPORTANT: Create a NEW array to trigger React re-rendersetCurrentStroke([...currentStroke, { x: locationX, y: locationY }]);
};
Success Criteria:
Guard clause prevents errors when currentStroke is null
Extract touch coordinates from event
Use spread operator to create new array (triggers re-render)
Moving finger creates continuous line
Why: React needs a new array reference to detect changes and re-render the drawing!
Expected Behavior: After completing this, dragging your finger will draw a smooth line that follows your touch.
When the user lifts their finger, save the completed stroke:
javascript
consthandleTouchEnd = () => {
// TODO #1: Check if there's a stroke to saveif (!currentStroke || currentStroke.length === 0) return;
// TODO #2: Add the completed stroke to the strokes arraysetStrokes([...strokes, currentStroke]);
// TODO #3: Reset currentStroke for the next drawingsetCurrentStroke(null);
};
Success Criteria:
Validate currentStroke exists and has points
Add completed stroke to strokes array
Reset currentStroke to null
Multiple strokes can be drawn without overlapping
Undo removes last completed stroke
Why: Separating current vs. completed strokes allows undo/redo functionality!
Expected Behavior: After completing this, lifting your finger will save the stroke permanently. You can draw multiple strokes, and the Undo button will remove them one at a time.
// Points array: [{x: 10, y: 20}, {x: 15, y: 25}, {x: 20, y: 30}]// Converts to SVG path: "M 10 20 L 15 25 L 20 30"// M = Move to first point// L = Line to subsequent points