Canvas for drawing in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you add this code to a SwiftUI Canvas?

Consider this SwiftUI Canvas code snippet. What will the user see rendered on the screen?

iOS Swift

Canvas { context, size in
  context.stroke(Path { path in
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 100, y: 100))
  }, with: .color(.red), lineWidth: 5)
}

A A red diagonal line from top-left (10,10) to bottom-right (100,100) with thickness 5

B Nothing is drawn because the path is incomplete

C A red rectangle from (10,10) to (100,100)

D A blue diagonal line from top-left (10,10) to bottom-right (100,100) with thickness 5

💡 Hint

Look at the stroke color and the points used in the path.

The code draws a red line from point (10,10) to (100,100) with a line width of 5. The color is explicitly set to red, so option A is correct.

❓ lifecycle

intermediate

When does the Canvas redraw in SwiftUI?

Given a SwiftUI Canvas view that depends on a @State variable, when will the Canvas redraw its content?

A Only when the @State variable changes

B Only when the app restarts

C Continuously every frame regardless of state

D Only when the user taps the Canvas

💡 Hint

Think about SwiftUI's reactive update system.

SwiftUI redraws views like Canvas when their dependent state changes. So if the Canvas depends on a @State variable, it redraws when that variable changes.

📝 Syntax

advanced

What error does this Canvas code produce?

Analyze this SwiftUI Canvas code snippet. What error will it cause?

iOS Swift

Canvas { context, size in
  context.fill(Path(ellipseIn: CGRect(x: 50, y: 50, width: 100, height: 100)), with: .color("blue"))
}

A Syntax error: Missing closing brace

B Runtime error: Invalid rectangle size

C No error, draws a blue ellipse

D Type error: Cannot convert String to Color

💡 Hint

Check the argument passed to .color()

The .color() modifier expects a Color type, not a String. Passing "blue" as a string causes a type error.

❓ navigation

advanced

How to update Canvas drawing after navigation back?

You have a Canvas drawing view that depends on data updated in a second view. After navigating back, the Canvas does not update. What is the best way to fix this?

A Add a timer to redraw Canvas every second

B Reload the entire app to refresh the Canvas

C Use @ObservedObject or @StateObject to share data and trigger redraw

D Use a global variable without property wrappers

💡 Hint

Think about SwiftUI data flow and state management.

Using @ObservedObject or @StateObject allows the Canvas view to observe changes in shared data and redraw automatically when data updates after navigation.

🧠 Conceptual

expert

Why use Canvas over Shape in SwiftUI for complex drawings?

Which reason best explains why you would choose Canvas instead of Shape for drawing complex graphics in SwiftUI?

A Shape automatically animates without extra code

B Canvas allows direct access to Core Graphics context for custom drawing commands

C Canvas is simpler and requires less code than Shape

D Shape supports bitmap images but Canvas does not

💡 Hint

Think about flexibility and low-level drawing control.

Canvas provides a drawing context giving low-level control over rendering, enabling complex custom graphics beyond what Shape's path-based drawing offers.

Practice

1. What is the primary method to override when drawing custom shapes on a UIView in Swift?

easy

A. draw(_ rect: CGRect)

B. viewDidLoad()

C. layoutSubviews()

D. updateConstraints()

Solution

1. Step 1: Understand UIView drawing lifecycle

   Custom drawing on a UIView is done by overriding the draw(_:) method.

2. Step 2: Identify the correct method signature

   The method draw(_ rect: CGRect) provides the area to draw and is called automatically when the view needs to render.

3. Final Answer:

   draw(_ rect: CGRect) -> Option A

4. Quick Check:

   Custom drawing uses draw(_:) [OK]

Hint: Remember: draw(_:) is the canvas entry point [OK]

Common Mistakes:

• Confusing draw(_:) with viewDidLoad()
• Trying to draw in layoutSubviews()
• Using updateConstraints() for drawing

2. Which Swift code correctly obtains the current graphics context inside draw(_:) for drawing?

easy

A. let context = UIView.getContext()

B. let context = CGContext.current()

C. let context = GraphicsContext.shared

D. let context = UIGraphicsGetCurrentContext()

Solution

1. Step 1: Recall the UIKit method for graphics context

   UIGraphicsGetCurrentContext() is the correct UIKit function to get the current drawing context.

2. Step 2: Verify method names and usage

   Other options are not valid UIKit methods or properties for getting the context.

3. Final Answer:

   let context = UIGraphicsGetCurrentContext() -> Option D

4. Quick Check:

   Use UIGraphicsGetCurrentContext() to get context [OK]

Hint: Use UIGraphicsGetCurrentContext() inside draw(_:) [OK]

Common Mistakes:

• Using non-existent methods like CGContext.current()
• Trying to get context outside draw(_:) method
• Confusing UIView methods with graphics context

3. What will be the visible result of this draw(_:) code snippet?

override func draw(_ rect: CGRect) {
  guard let ctx = UIGraphicsGetCurrentContext() else { return }
  ctx.setFillColor(UIColor.red.cgColor)
  ctx.fill(CGRect(x: 10, y: 10, width: 100, height: 50))
}

medium

A. A blue rectangle at position (10,10) sized 100x50

B. A red rectangle at position (10,10) sized 100x50

C. No visible shape because fill color is not set

D. A red circle at position (10,10) sized 100x50

Solution

1. Step 1: Analyze fill color and shape

   The code sets fill color to red and fills a rectangle at (10,10) with width 100 and height 50.

2. Step 2: Confirm shape and color match

   The shape is a rectangle, not a circle, and color is red, not blue.

3. Final Answer:

   A red rectangle at position (10,10) sized 100x50 -> Option B

4. Quick Check:

   Fill color red + fill rect = red rectangle [OK]

Hint: Fill color sets shape color; fill draws the shape [OK]

Common Mistakes:

• Assuming default color is blue
• Confusing rectangle with circle
• Forgetting to unwrap context safely

4. Identify the error in this draw(_:) method that prevents drawing a blue circle:

override func draw(_ rect: CGRect) {
  let ctx = UIGraphicsGetCurrentContext()
  ctx.setFillColor(UIColor.blue.cgColor)
  ctx.fillEllipse(in: CGRect(x: 20, y: 20, width: 80, height: 80))
}

medium

A. UIColor.blue.cgColor is invalid

B. Incorrect method fillEllipse(in:) used

C. Missing guard or forced unwrap for context

D. CGRect coordinates are out of bounds

Solution

1. Step 1: Check context unwrapping

   The context is optional and not safely unwrapped, causing a compile error because ctx is optional.

2. Step 2: Confirm method and color correctness

   fillEllipse(in:) and UIColor.blue.cgColor are correct and CGRect is valid.

3. Final Answer:

   Missing guard or forced unwrap for context -> Option C

4. Quick Check:

   Always unwrap context safely before drawing [OK]

Hint: Always unwrap UIGraphicsGetCurrentContext() safely [OK]

Common Mistakes:

• Ignoring optional context leading to no drawing
• Thinking fillEllipse(in:) is wrong method
• Assuming color cgColor is invalid

5. You want to draw a green rectangle with a black border of 5 points thickness inside draw(_:). Which code snippet correctly achieves this?

hard

A. ctx.setFillColor(UIColor.green.cgColor)
ctx.fill(rect)
ctx.setStrokeColor(UIColor.black.cgColor)
ctx.setLineWidth(5)
ctx.stroke(rect)

B. ctx.setStrokeColor(UIColor.green.cgColor)
ctx.stroke(rect)
ctx.setFillColor(UIColor.black.cgColor)
ctx.fill(rect)
ctx.setLineWidth(5)

C. ctx.setFillColor(UIColor.black.cgColor)
ctx.fill(rect)
ctx.setStrokeColor(UIColor.green.cgColor)
ctx.setLineWidth(5)
ctx.stroke(rect)

D. ctx.setLineWidth(5)
ctx.setFillColor(UIColor.green.cgColor)
ctx.stroke(rect)
ctx.setStrokeColor(UIColor.black.cgColor)
ctx.fill(rect)

Solution

1. Step 1: Fill rectangle with green color

   Set fill color to green and fill the rect to paint the inside.

2. Step 2: Draw black border with stroke

   Set stroke color to black, line width to 5, then stroke the rect to draw border.

3. Final Answer:

   Fill green then stroke black with line width 5 -> Option A

4. Quick Check:

   Fill first, then stroke for border [OK]

Hint: Fill shape first, then stroke border with line width [OK]

Common Mistakes:

• Swapping fill and stroke colors
• Setting line width after stroke call
• Calling stroke before fill