Custom shapes and Canvas: a hands-on guide for engineers

Introduction: Drawing custom visuals in production apps

Most teams reach a point where standard SwiftUI components don't quite cut it. You need a custom data visualization, a branded chart, or perhaps an interactive signature canvas. Custom shapes and Canvas are your answer, letting you draw anything pixel-perfect directly in SwiftUI. In this guide, we'll cover how to build production-ready drawing systems using the Shape protocol, Canvas for rendering many elements efficiently, TimelineView for animation timing, and the Charts framework for data visualization.

Shape protocol with paths

The Shape protocol is the foundation for custom drawing in SwiftUI. Rather than composing basic rectangles and circles, you define a path—a mathematical representation of lines, curves, and arcs—then SwiftUI renders it as a view.

Let's build a common real-world example: a custom progress ring for a fitness app tracking workout intensity.

import SwiftUI

struct ProgressRing: Shape {
    let progress: Double
    let lineWidth: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = (min(rect.width, rect.height) - lineWidth) / 2
        
        let startAngle = Angle(degrees: -90)
        let endAngle = Angle(degrees: -90 + 360 * progress)
        
        path.addArc(
            center: center,
            radius: radius,
            startAngle: startAngle,
            endAngle: endAngle,
            clockwise: false
        )
        
        return path
    }
}

struct ProgressRingView: View {
    @State private var progress: Double = 0.65
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(Color.gray.opacity(0.2), lineWidth: 12)
            
            ProgressRing(progress: progress, lineWidth: 12)
                .stroke(
                    LinearGradient(
                        gradient: Gradient(colors: [.blue, .purple]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    style: StrokeStyle(lineWidth: 12, lineCap: .round)
                )
                .animation(.easeInOut(duration: 1), value: progress)
        }
        .frame(width: 200, height: 200)
        .padding()
    }
}

The key insight here: Shape returns a Path, and SwiftUI handles all rendering. The path uses polar coordinates (center, radius, angles) to draw an arc. When progress changes, SwiftUI animates the endAngle smoothly.

For more complex shapes, you often layer multiple paths or use path.addCurve() and path.addQuadCurve() for Bezier curves. Always compute geometry in the path(in:) method so it scales with the container.

Canvas for many drawn elements

When you need to draw dozens or hundreds of shapes, individual SwiftUI views become slow. Canvas solves this by rendering many drawing operations in a single Metal/Core Graphics call. Use Canvas when you have a large dataset and each element needs custom geometry.

Consider a heat-map visualization for a ride-hailing app showing demand density across a city grid:

import SwiftUI

struct HeatmapCell {
    let x: Int
    let y: Int
    let intensity: Double
}

struct HeatmapCanvas: View {
    let cells: [HeatmapCell]
    let gridSize: Int
    
    var body: some View {
        Canvas { context in
            let cellSize = 50.0
            
            for cell in cells {
                let frame = CGRect(
                    x: Double(cell.x) * cellSize,
                    y: Double(cell.y) * cellSize,
                    width: cellSize,
                    height: cellSize
                )
                
                let color = colorForIntensity(cell.intensity)
                var rect = Path(roundedRect: frame, cornerRadius: 4)
                context.fill(rect, with: .color(color.opacity(cell.intensity)))
                
                context.stroke(
                    rect,
                    with: .color(.black.opacity(0.1)),
                    lineWidth: 1
                )
            }
        }
        .frame(height: CGFloat(gridSize) * 50)
    }
    
    private func colorForIntensity(_ intensity: Double) -> Color {
        switch intensity {
        case 0..<0.3: return .blue
        case 0.3..<0.6: return .yellow
        case 0.6..<0.9: return .orange
        default: return .red
        }
    }
}

Canvas accepts a closure where you receive a GraphicsContext. You draw using context.fill(), context.stroke(), context.draw(), and other methods. Unlike building 100 Rectangle views, Canvas batches these operations into one render pass, making it performant even with thousands of elements.

A practical note: Canvas doesn't create SwiftUI views inside its closure, so you can't use state or gestures directly on individual cells. If you need interactivity per-cell, you may need to overlay a transparent hit-detection layer or handle tap coordinates manually.

TimelineView for time-based drawing

Animations that need precise timing—like a clock face updating every second, or a waveform that pulses in sync with audio—benefit from TimelineView. It updates on a schedule you define, rather than relying on state changes.

Here's a practical example: an audio visualization for a voice-recording app that draws live audio levels:

import SwiftUI

struct AudioVisualizerView: View {
    @State private var audioLevels: [CGFloat] = Array(repeating: 0.1, count: 40)
    
    var body: some View {
        TimelineView(.periodic(updateInterval: 0.05)) { context in
            Canvas { canvas in
                let width = 300.0
                let height = 100.0
                let barWidth = width / CGFloat(audioLevels.count)
                
                for (index, level) in audioLevels.enumerated() {
                    let x = CGFloat(index) * barWidth
                    let barHeight = level * height
                    let y = height - barHeight
                    
                    let rect = CGRect(
                        x: x + 2,
                        y: y,
                        width: barWidth - 4,
                        height: barHeight
                    )
                    
                    let color = Color.blue.opacity(0.5 + 0.5 * level)
                    canvas.fill(
                        Path(roundedRect: rect, cornerRadius: 2),
                        with: .color(color)
                    )
                }
            }
            .frame(width: 300, height: 100)
            .background(Color.gray.opacity(0.1))
            .onReceive(Timer.publish(every: 0.05, on: .main, in: .common).autoconnect()) { _ in
                updateAudioLevels()
            }
        }
    }
    
    private func updateAudioLevels() {
        audioLevels = audioLevels.dropFirst() + [CGFloat.random(in: 0.2...0.9)]
    }
}

TimelineView's .periodic(updateInterval:) schedule tells SwiftUI to redraw at a fixed interval. The context provides the current date, which you can use for calculations. This is more efficient than animating individual state values when you have many elements changing together.

For real audio input, you'd wire in an audio engine (like AVAudioEngine or a Combine publisher) to update audioLevels as samples arrive. TimelineView keeps the UI in sync without manual animation management.

Charts framework for data visualization

For business intelligence dashboards, analytics, or any app that displays trends and comparisons, Apple's Charts framework (iOS 16+) provides a declarative way to build interactive charts with minimal code.

Let's visualize revenue trends for a SaaS product dashboard:

import SwiftUI
import Charts

struct RevenueTrend: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Double
    let target: Double
}

struct RevenueChartView: View {
    let data: [RevenueTrend] = [
        RevenueTrend(month: "Jan", revenue: 45000, target: 50000),
        RevenueTrend(month: "Feb", revenue: 52000, target: 50000),
        RevenueTrend(month: "Mar", revenue: 48000, target: 50000),
        RevenueTrend(month: "Apr", revenue: 61000, target: 55000),
    ]
    
    @State private var selectedMonth: String?
    
    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Month", item.month),
                y: .value("Revenue", item.revenue)
            )
            .foregroundStyle(Color.blue.opacity(0.7))
            
            LineMark(
                x: .value("Month", item.month),
                y: .value("Target", item.target)
            )
            .foregroundStyle(Color.red)
            .lineStyle(StrokeStyle(lineWidth: 2, dash: [5]))
        }
        .chartXAxis {
            AxisMarks(position: .bottom)
        }
        .chartYAxis {
            AxisMarks(format: .currency(code: "USD"))
        }
        .frame(height: 300)
        .padding()
    }
}

The Charts framework uses marks (BarMark, LineMark, PointMark, etc.) to define what to draw, and automatically handles scales, legends, and axes. You compose multiple marks on the same data to overlay visualizations. Interactivity—like selection or filtering—is built-in via chart selection modifiers.

For complex custom requirements not covered by built-in marks, you can still fall back to Canvas or Shape for full control.

Common mistakes

• Computing geometry outside the path closure: Don't cache rect values at init time. Shapes scale with their container, so always compute geometry fresh inside path(in:).
• Overusing Canvas for interactive elements: Canvas is fast for static or simple animations, but if you need per-element tap handling or state binding, SwiftUI views are cleaner. Use Canvas for hundreds of elements; use views for dozens with rich interaction.
• Ignoring performance in TimelineView: Don't update expensive calculations on every tick. Pre-compute or throttle data updates, and let TimelineView just re-render with fresh data.
• Forgetting to handle edge cases in Charts: Empty data, zero values, and extreme ranges can break axis scaling. Always validate your data and provide sensible defaults.
• Using stroke and fill without proper opacity: Overlapping strokes can look muddy. Use opacity and blend modes intentionally.

Key takeaways

• The Shape protocol lets you define custom drawn paths for one-off visual elements. Use it for progress indicators, badges, or custom icons.
• Canvas batches many drawing operations into a single render, making it ideal for heatmaps, particle systems, or large datasets. It trades interactivity per-element for raw performance.
• TimelineView updates on a schedule, keeping animations smooth and decoupled from state. Perfect for real-time data like audio levels or live metrics.
• Charts framework handles the boilerplate of scales, axes, and legends, letting you focus on data semantics. Use it for dashboards and analytics. Fall back to Canvas or Shape when you need pixel-perfect control.
• Always compute geometry in render methods, not during initialization, so your custom drawings scale properly across devices.