2026年10月7日
コメント
課題: AI エージェントに正しい Canvas2D を描画させる
Qt 6.12 では Qt Canvas2D が導入されました。その API は HTML5 Canvas や従来の Qt Quick Canvas 要素を踏襲しています。これらは開発者だけでなく、AI モデルも学習データの中で数多く目にしてきたものです。
しかし、Canvas2D の目標は HTML5 Canvas との 100% の互換性ではありません。そのため、AI エージェントを使って UI を描画しようとすると、この「馴染み深さ」が逆に問題になります。例えば、ゲージやリアルタイムオシロスコープを描画するよう指示されたエージェントは、自信満々に 、描画を任意の形状でクリッピングする、破線を描画する、キャンバスからピクセルの色を読み戻す、柔らかなドロップシャドウを追加する、といったCanvas2D には存在しない機能を使おうとします。
その結果として生成されたコードは、コンパイルできる場合もありますし、実行できる場合さえあります。しかし、その動作は正しくありません。そして問題は、多くの場合その誤りが実行時になって初めて表面化することです。例えば、透明なオーバーレイが表示されるはずだった場所に黒い四角形が現れたり、図形が意図しない軸を中心に反転して描画されたりします。
組み込みデバイス UI 開発向け Canvas2D Agentic Coding Skill の登場
新しい Canvas2D Coding Skill は、このギャップを埋めるためのものです。このスキルは、HTML Canvas のコードとのパターンマッチングや、高コストな Qt ドキュメントへの問い合わせに頼るのではなく、Canvas2D モジュールの実際のランタイム動作から整理されたルール群と、信頼できる API リファレンスを AI エージェントに提供します。このスキルは、プロジェクトのセットアップ、GPU 側で動作する描画モデル、save / restore の適切な使用方法、パフォーマンス向上のための path2d キャッシュ、利用できない機能の明確な一覧、それぞれの機能に対する正しい代替手段などの内容を含んでいます。
このスキルは、2D キャンバス関連の作業が対象になったときに自動的に有効化されます。例えば、Canvas 描画コードの作成、レビュー、バグ修正、最適化、移植といった作業です。
Canvas2D Coding Skill の主な機能:
-
正確な API に基づくコード生成 - すべての ctx 呼び出しは、記憶に基づく HTML Canvas の挙動ではなく、実際の Canvas2D API に照らして検証されます。
-
適切なデフォルト設定 - fillColor や alphaBlending は意図的に設定されます。その結果、キャンバスが不透明な黒い矩形として表示されてしまうような問題を防げます。
-
path2d による高性能化 - 永続的なジオメトリは GPU 側のパスグループにキャッシュされます。毎フレーム図形を再構築するのではなく、変換（transform）によってインスタンス化されます。
-
移植ガイド - Qt Quick Canvas、HTML5 Canvas、QCanvasPainter C++から Canvas2D へ移植するための専用ルールが用意されています。
-
19 種類の実行可能なレシピ - 静的図形、棒グラフ、ラジアルゲージ、オシロスコープ、アナログ時計、パン／ズーム対応ビューポートのようなサンプルが含まれています。
レシピ・ライブラリ
このスキルには、一般的な Canvas の利用パターンをカバーする 19 種類の実行可能な実装例 が含まれています。それぞれの実装は、このスキルで定義された異なるルールの組み合わせを示しています。何もない状態から描き始めるのではなく、最も近い実装例をベースに改造したり、サンプル実装として学習したりできます。利用できるコード例は以下のとおりです:
• static-shapes.qml - 単発描画、基本図形、塗りつぶしルール、穴あき形状、save/restore
• animated-line-chart.qml - FrameAnimation ループ、グリッドパターン背景、グラデーションによる領域塗りつぶし、キャッシュされた座標軸パス
• bar-chart.qml - バッチ化された rect() パス、ボックスグラデーションの棒グラフ、値ラベル、テキストサイズ計測
• pie-donut-chart.qml - リング状セクター、円錐グラデーション版、凡例、中央配置テキスト
• scatter-plot.qml - パスグループを利用した path2d マーカーのインスタンス化、数千点規模のデータ表示
• radial-gauge.qml - 円錐グラデーションのアーク、パスグループにキャッシュされた目盛りリング、針、ボックスシャドウ
• progress-ring.qml - アニメーション付きアーク、丸い線端、Behavior による値変更、中央ラベル
• analog-clock.qml - 変換スタック、キャッシュされた目盛りパス、滑らかに動く秒針、シャドウ付きベゼル
• oscilloscope.qml - リングバッファ、フレームごとに 1000 以上のセグメントを持つポリライン、アンチエイリアスによるグロー描画処理
• node-link-diagram.qml - ベジェ曲線リンク、ノードのインスタンス化、ピクセルベースのヒットテストを使用しないドラッグ操作とヒットテスト
• freehand-drawing.qml - 永続的な path2d ストローク、ポインター入力、キャッシュされた確定済みストローク、取り消し（Undo）
• text-panel.qml - フォント、配置、ベースライン、テキスト折り返し、行間、テキストサイズ計測、文字方向
• images-and-patterns.qml - 画像の読み込み、drawImage の各種オーバーロード、画像パターン、色付け（Tinting）
• shadowed-card-button.qml - ボックスシャドウ、角ごとの個別コーナー半径、ホバー状態と押下状態、ヒットテスト、アクセシビリティ
• color-effects-and-clipping.qml - グローバルアルファ、明度、コントラスト、彩度の調整、合成モード、矩形クリッピング
• pan-zoom-viewport.qml - transform2d カメラ、ワールド座標系でキャッシュされたパス、詳細度制御（Level of Detail）、スクリーン座標からワールド座標への逆変換
• level-meter.qml - バッチ化された矩形ゾーン、キャッシュされたセグメント領域、フレームレートに依存しないピーク減衰
• sparkline-delegate.qml - ListView デリゲートごとの Canvas 利用、再利用時の処理、および単一の共有 Canvas を使用した方が有利なケース
• rotary-knob.qml - ドラッグ、マウスホイール、キーボードによる連続制御、キャッシュされた目盛りリング、フォーカスリング、アクセシブルなダイヤルロール
Canvas 描画に特化したスキル
このスキルの対象範囲は、Canvas アイテムそのものに厳密に限定されています。具体的には、onPaint 関数、描画 API の呼び出し、Canvas レベルのプロパティを対象としています。一方で、QML コンポーネント構造、import 文、プロパティバインディング、Window / ApplicationWindow のセットアップのような周辺部分は対象外です。そのため、Canvas アイテム以外の QML が関係する作業では、このスキルは qt-qml coding skill を併用することを推奨しており、必要に応じてそのスキルへ処理を委譲します。
動作確認済み環境
このスキルは以下の環境でテストされています。
-
Claude Code CLI + Claude Sonnet 5
-
GitHub Copilot + GPT 5.6 Sol + Gemini 3.8 Flash
-
Qwen Code + GLM 5.2 + Qwen 3.8 Max
スキルの入手方法
The Canvas2D coding skill is available via the Qt agent skills GitHub repository or the Claude qt-development plug-in, alongside the QML coding skill, the QML profiler skill, and other Qt-specific agentic capabilities.
Canvas2D Coding Skill は、Qt Agent Skills GitHub リポジトリおよび Claude の qt-development プラグインから利用できます。また、QML Coding Skill、QML Profiler Skill、その他の Qt 専用エージェント開発向け機能などQt 向けエージェントスキルとあわせて提供されています。
