【SwiftUI】Canvasとは？使い方や活用シーンをわかりやすく解説

2025年9月25日 2025年9月25日

SwiftUIで図形やアニメーションを自由に描画したいときに便利なのが Canvas です。

UIKitでいうところの Core Graphics や CALayer に近い仕組みを、SwiftUIらしい宣言的な書き方で使えるのがポイントです。

この記事では Canvasの基本的な意味や使い方、主要な引数、活用シーン、注意点 までわかりやすく解説します。

Canvasとは？

Canvas は SwiftUI における描画用のビューで、図形やテキスト、画像などを「自分でカスタム描画」できる仕組みを提供します。

通常の Rectangle や Circle などのシェイプは「決められた形」を表示しますが、Canvas を使うと もっと自由な表現 が可能になります。

内部的には Core Graphics をベースにしており、CGContext に近い感覚で線や図形を描けます。

つまり、「自分だけのカスタム描画ビューをSwiftUIで作れる便利なビュー」 が Canvas です。

具体例：シンプルな円を描画する

import SwiftUI

struct ContentView: View {
    var body: some View {
        Canvas { context, size in
            let circle = Path(ellipseIn: CGRect(x: 0, y: 0, width: size.width, height: size.height))
            context.stroke(circle, with: .color(.blue), lineWidth: 5)
        }
        .frame(width: 200, height: 200)
        .border(.gray)
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Canvas { context, size in

let circle = Path(ellipseIn: CGRect(x: 0, y: 0, width: size.width, height: size.height))

context.stroke(circle, with: .color(.blue), lineWidth: 5)

}

.frame(width: 200, height: 200)

.border(.gray)

}

コードのポイント

上記コードでは青い円と灰色の外枠を描いています。

コードのポイントは下記の通りです。

Canvas の定義
- Canvas { context, size in ... } のクロージャの中で、図形の描画処理を書きます。
- context: 実際の描画コンテキスト（ペンのような役割）。
- size: Canvas の描画領域のサイズ（ここでは.frameで指定した 200×200）。
円のパスを作成
- Path(ellipseIn:) を使って、指定した CGRect に収まる円の形を作ります。
- 今回は (x: 0, y: 0, width: size.width, height: size.height) → つまり Canvas 全体に収まる円。
円の枠を描画
- context.stroke(circle, with: .color(.blue), lineWidth: 5)
- 円を「塗りつぶし」ではなく「線（枠）」として描画。
- 色は青、線の太さは 5pt。
見た目の調整
- .frame(width: 200, height: 200) で領域を指定。
- .border(.gray) で外側に灰色の枠を追加（Canvas のサイズ確認用）。

通常の Circle() より柔軟に制御でき、複数の図形や複雑なレイアウトも自由に描画できます。

主要な引数

Canvasの主要な引数は下記の通りです。

引数名	型	説明
`renderer`	`(GraphicsContext, CGSize) -> Void`	描画処理を書くクロージャ
`opaque`	`Bool`	背景を透過させるかどうか（パフォーマンス最適化用）
`colorMode`	`Canvas.ColorRenderingMode`	色の描画モード（例：.nonLinear、.linear）

中心となるのは renderer で、実際の描画内容を定義します。

通常はこれで十分ですが、背景処理や色の扱いを調整したい場合に opaque や colorMode を追加で指定します。

実際は下記のように指定します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Canvas(opaque: true, colorMode: .linear) { context, size in
            // renderer に指定する処理
            let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            context.fill(Path(ellipseIn: rect), with: .color(.blue))
        }
        .frame(width: 200, height: 200)
        .background(Color.gray)
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Canvas(opaque: true, colorMode: .linear) { context, size in

// renderer に指定する処理

let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)

context.fill(Path(ellipseIn: rect), with: .color(.blue))

}

.frame(width: 200, height: 200)

.background(Color.gray)

}

コードのポイント

Canvas(opaque:colorMode:renderer:) を利用
- opaque: true → 背景を透過せずに描画（パフォーマンス最適化）
- colorMode: .linear → 色を線形補間で表現（グラデーションや合成でより正確な色になる）
- renderer クロージャ { context, size in ... } → 実際の描画処理をここに書く

背景が透過されないので、下記のような色合いになります。

活用シーン

Canvasは標準のビューやシェイプでは表現しにくい表現を作りたい時に役立ちます。

独自の図形を描きたいとき
グラフやチャートを自作したいとき
パーティクルアニメーション（花火、雨、星など）
ゲームの背景やエフェクト
複雑なカスタムUI

「システムにない表現を自分で描きたい」場合に特に便利です。

注意点

Canvasは便利ですが、下記点には注意しておきましょう！

iOS 15 / macOS 12 以降でしか使えない
描画処理は毎フレーム呼ばれるため、処理が重いとパフォーマンス低下につながる
UIKit の Core Graphics より機能は限定的
シンプルな図形なら Shape ビューを使った方が簡単

便利な一方で制約もあるため、目的に応じて使い分けることが重要です。

まとめ

今回はSwift UIのCanvasを紹介しました！

Canvas は SwiftUIでカスタム描画を行うためのビュー
context と size を使って線や図形を自由に描画できる
アニメーションと組み合わせて動きのある表現も可能
グラフ、パーティクル、ゲームUIなど幅広く活用できる
パフォーマンスや対応OSに注意する必要がある

SwiftUIの表現力を大きく広げてくれる便利なビューです。

「標準のShapeでは表現できないUIを作りたい」ときに、ぜひ活用してみてくださいね！

【SwiftUI】Canvasとは？使い方や活用シーンをわかりやすく解説

Canvasとは？

具体例：シンプルな円を描画する

コードのポイント

主要な引数

コードのポイント

活用シーン

注意点

まとめ

最近の投稿

最近のコメント

アーカイブ

カテゴリー