0Pricing
Swift Academy · Lesson

TimelineView and Canvas for High-Performance Drawing

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

TimelineView and Canvas for High-Performance Drawing is a free Swift Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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.

Frequently asked questions

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

Yes — the full text of “TimelineView and Canvas for High-Performance Drawing” is free to read here on the web, and the Swift Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Swift Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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