Canvas for drawing in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a UIView subclass that can draw a red circle.

iOS Swift

class DrawingView: UIView {
  override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    context.setFillColor(UIColor.[1].cgColor)
    context.fillEllipse(in: rect)
  }
}

Drag options to blanks, or click blank then click option'

AColor

BRed

CredColor

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Red' instead of lowercase 'red'.

Using 'redColor' which is not a UIColor property.

The correct property is 'red' with lowercase 'r' in UIColor to get the red color.

2fill in blank

medium

Complete the code to add the DrawingView as a subview and set its frame.

iOS Swift

let drawingView = DrawingView()
drawingView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
self.view.[1](drawingView)

Drag options to blanks, or click blank then click option'

AaddSubview

BaddView

CinsertSubview

DappendSubview

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addView' which does not exist.

Using 'appendSubview' which is not a valid method.

To add a view as a child, use 'addSubview' method on the parent view.

3fill in blank

hard

Fix the error in the draw method to set the stroke color to blue.

iOS Swift

override func draw(_ rect: CGRect) {
  guard let context = UIGraphicsGetCurrentContext() else { return }
  context.setStrokeColor(UIColor.[1].cgColor)
  context.stroke(rect)
}

Drag options to blanks, or click blank then click option'

AblueColor

Bblue

CBLUE

DBlue

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Blue' or 'BLUE'.

Using 'blueColor' which is not a UIColor property.

UIColor properties are lowercase, so 'blue' is correct to get blue color.

4fill in blank

hard

Fill both blanks to draw a green rectangle with a 5 point line width.

iOS Swift

override func draw(_ rect: CGRect) {
  guard let context = UIGraphicsGetCurrentContext() else { return }
  context.setStrokeColor(UIColor.[1].cgColor)
  context.setLineWidth([2])
  context.stroke(rect)
}

Drag options to blanks, or click blank then click option'

Agreen

Bblue

C5

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong color names like 'blue'.

Using line width values that are too small or strings.

Use 'green' for the stroke color and '5' for the line width to draw a thick green rectangle.

5fill in blank

hard

Fill all three blanks to draw a filled yellow ellipse with a black border.

iOS Swift

override func draw(_ rect: CGRect) {
  guard let context = UIGraphicsGetCurrentContext() else { return }
  context.setFillColor(UIColor.[1].cgColor)
  context.fillEllipse(in: rect)
  context.setStrokeColor(UIColor.[2].cgColor)
  context.setLineWidth([3])
  context.strokeEllipse(in: rect)
}

Drag options to blanks, or click blank then click option'

Ayellow

Bblack

C2

Dwhite

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing fill and stroke colors.

Using too thick or zero line width.

Fill color is yellow, stroke color is black, and line width is 2 points for a visible border.