PricingLoginStart free
Swift Academy · Lesson

TimelineView and Canvas for High-Performance Drawing

Rendering real-time animations with TimelineView schedules and Canvas API.

Lesson 4 of 413 steps

TimelineView and Canvas for High-Performance Drawing is a free Swift Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, and your progress syncs across the web and the CoddyKit app. The Swift Academy course includes 4 lessons in total.

TimelineView Overview

TimelineView redraws its content on a schedule, enabling real-time animations without timers.

TimelineView(.animation) { timeline in
  Text(timeline.date.formatted(date: .omitted, time: .standard))
}

TimelineSchedule Types

Built-in schedules: .animation (every frame), .periodic (fixed interval), .explicit (specific dates).

TimelineView(.periodic(from: .now, by: 1.0)) { context in
  ClockFace(date: context.date)
}

Canvas Overview

Canvas provides a 2D drawing context for high-performance immediate-mode graphics, similar to Core Graphics.

Canvas { ctx, size in
  ctx.fill(
    Path(ellipseIn: CGRect(origin: .zero, size: size)),
    with: .color(.blue)
  )
}

Drawing Shapes in Canvas

Use GraphicsContext methods like fill, stroke, and draw to render paths and images.

Canvas { ctx, size in
  var path = Path()
  path.move(to: .zero)
  path.addLine(to: CGPoint(x: size.width, y: size.height))
  ctx.stroke(path, with: .color(.red), lineWidth: 2)
}

Combining TimelineView and Canvas

Wrap a Canvas inside TimelineView for frame-by-frame animation without SwiftUI state updates.

TimelineView(.animation) { timeline in
  Canvas { ctx, size in
    let t = timeline.date.timeIntervalSinceReferenceDate
    let x = size.width * (0.5 + 0.4 * cos(t))
    let y = size.height * (0.5 + 0.4 * sin(t))
    ctx.fill(Path(ellipseIn: CGRect(x: x-10, y: y-10, width: 20, height: 20)), with: .color(.orange))
  }
}

Resolving Symbols

Call ctx.resolve() to resolve SwiftUI views (like Image) into drawable symbols for Canvas.

Canvas { ctx, size in
  let symbol = ctx.resolveSymbol(id: "star")!
  ctx.draw(symbol, at: CGPoint(x: 50, y: 50))
} symbols: {
  Image(systemName: "star.fill").tag("star")
}

Text and Attributed Strings in Canvas

Draw text using ctx.draw(Text(...), at:) for custom label rendering inside Canvas.

Canvas { ctx, size in
  ctx.draw(
    Text("Score: 100").font(.title).foregroundStyle(.white),
    at: CGPoint(x: size.width/2, y: 30)
  )
}

Transforms and Clipping

Apply affine transforms and clipping paths to the graphics context for complex effects.

Canvas { ctx, size in
  ctx.translateBy(x: size.width/2, y: size.height/2)
  ctx.rotate(by: .degrees(45))
  ctx.fill(Path(CGRect(x: -50, y: -50, width: 100, height: 100)), with: .color(.purple))
}

Performance vs SwiftUI Views

Canvas renders all graphics in a single draw pass — ideal for particle systems or complex charts where thousands of views would be too slow.

// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overhead

Accessibility in Canvas

Canvas content is invisible to VoiceOver. Add accessibility labels via the accessibilityChildren modifier.

Canvas { ctx, size in
  // draw chart bars
}
.accessibilityChildren {
  ForEach(bars) { Text("\($0.label): \($0.value)") }
}

TimelineView Cadence

The context provides a cadence hint (live, seconds, minutes) so you can reduce detail when the system is under load.

TimelineView(.animation) { ctx in
  if ctx.cadence == .live {
    HighDetailAnimation(date: ctx.date)
  } else {
    LowDetailAnimation(date: ctx.date)
  }
}

Quick Check

Which TimelineSchedule causes TimelineView to redraw on every animation frame?

Answer it in the interactive lesson

Lesson Recap

TimelineView redraws on a schedule (per-frame with .animation). Canvas gives an immediate-mode 2D drawing context. Combine them for high-performance particle effects, games, and live charts without per-frame SwiftUI view diffing overhead.

Free to start

Learn Swift with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
122
Lessons
409
Start learning freeView the full course

Frequently Asked Questions

Is the “TimelineView and Canvas for High-Performance Drawing” lesson free?

Yes — any 3 lessons of the Swift Academy learning path, including “TimelineView and Canvas for High-Performance Drawing”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Swift Academy course includes 4 lessons in total.

What will I learn in “TimelineView and Canvas for High-Performance Drawing”?

Rendering real-time animations with TimelineView schedules and Canvas API. You practise Swift Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Swift Academy?

No prior experience is required. Swift Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “TimelineView and Canvas for High-Performance Drawing” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Swift Academy lesson?

Yes. Every Swift Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Implicit vs Explicit Animations
  2. matchedGeometryEffect for Hero Transitions
  3. Custom AnimatableModifier and Animatable
  4. TimelineView and Canvas for High-Performance Drawing
← Back to Swift Academy