# Canvas

{% tabs %}
{% tab title="💈範例" %}
{% hint style="info" %}
Every <mark style="color:orange;">**canvas**</mark> has a <mark style="color:red;">**context**</mark> and a <mark style="color:red;">**size**</mark> to work with.
{% endhint %}

```swift
struct HexagonView: View {
    var body: some View {
        // ⭐️ canvas
        Canvas { context, size in
            // ⭐️ draw text
            context.draw(
                Text("Design+Code"),
                at: CGPoint(x: 100, y: 100)
            )
            // ⭐️ draw image
            context.draw(
                Image("Blob 1"),
                in: CGRect(x: 50, y: 150, width: 300, height: 200)
            )
            context.draw(
                Image(systemName: "hexagon"),
                // ⭐️ image size relative to parent
                in: CGRect(x: 25, y: 150, width: size.width/4, height: size.height/6)
            )
            // ⭐️ fill path
            context.fill(
                Path(ellipseIn: CGRect(x: 10, y: 10, width: 50, height: 50)),
                with: .color(.red)
            )
        }
    }
}
```

![a canvas view](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F9USPGlXywWrjCxOCJk0P%2Fcanvas-demo.png?alt=media\&token=296785eb-be2c-4c81-b602-f56a202b3e7f)
{% endtab %}

{% tab title="⭐️ 重點" %}
```swift
// declaration
struct Canvas<Symbols> where Symbols : View
```
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Drawing and Animation](https://developer.apple.com/documentation/swiftui/drawing-and-animation)
  * [Canvas](https://developer.apple.com/documentation/swiftui/canvas/) (<mark style="color:red;">**struct**</mark>)
  * [GraphicsContext](https://developer.apple.com/documentation/swiftui/graphicscontext) (<mark style="color:red;">**struct**</mark>)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Design+Code - [Graphics in Canvas](https://designcode.io/swiftui-ios15-graphics-in-canvas)
* [ ] [Frigerio](https://www.gfrigerio.com/) ⟩ [Introduction to Canvas in SwiftUI](https://www.gfrigerio.com/introduction-to-canvas-in-swiftui/)
* [ ] WWDC21 ⟩ [Add rich graphics to your SwiftUI app](https://developer.apple.com/videos/play/wwdc2021/10021/)
{% endtab %}
{% endtabs %}
