Canvas for drawing in iOS Swift - UI Render Trace

Component - Canvas for drawing

This component provides a simple canvas where users can draw by touching and dragging their finger on the screen. It captures touch movements and renders lines following the finger path.

Widget Tree

UIView
└── DrawingView
    ├── CAShapeLayer
    └── Gesture Recognizer

The main UIView hosts a custom DrawingView subclass. DrawingView uses a CAShapeLayer to render the drawn lines. A gesture recognizer detects finger movements to update the drawing.

Render Trace - 4 Steps

Step 1: UIView

Step 2: DrawingView

Step 3: CAShapeLayer

Step 4: Gesture Recognizer

State Change - Re-render

Trigger:User touches and drags finger on the screen

Before

CAShapeLayer path is empty, no lines drawn

→

After

CAShapeLayer path updated with new points following finger movement

Re-renders:DrawingView and its CAShapeLayer re-render to show new lines

UI Quiz - 3 Questions

What happens when the user starts dragging their finger on the canvas?

A The CAShapeLayer path updates to follow the finger movement

B The background color changes to black

C A new UIView is added to the screen

D The app navigates to a new screen

Key Insight

Using a CAShapeLayer inside a custom UIView is an efficient way to render smooth, dynamic drawings in iOS. Gesture recognizers capture touch input cleanly, separating input handling from rendering logic.