# qt-canvas2d

> Claude/Codex skill by [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars · Updated 2026-10-20

Applies Qt Canvas2D (QtCanvas2D / Qt Canvas Painter, Qt 6.12+) best practices when producing or working with Canvas2D QML source code. Use whenever Canvas2D, Canvas2DContext, path2d, boxshadow2d, boxgradient2d, gridpattern2d, conicalgradient2d or transform2d is the subject: writing, reviewing, fixing, optimizing, or porting Qt Quick Canvas / HTML5 canvas drawing code to Canvas2D. Also use for GPU-accelerated imperative 2D drawing in QML — gauges, dials, charts, waveforms, oscilloscopes, clocks, freehand drawing — including choosing between Canvas2D and Shape/ShapePath when the renderer has not been decided yet. Do NOT trigger for plain Qt Quick Canvas work that must stay on the old CPU element, or for reviewing existing Shape/ShapePath code where the renderer is already settled.

Tags: ai-skills, claude-code, codex, github-copilot, qml, qt

## Install

```sh
git clone https://github.com/TheQtCompanyRnD/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/qt-canvas2d ~/.claude/skills/qt-canvas2d
```

## From README

Qt Canvas2D Coding Skill Canvas2D is a QML item introduced in Qt 6.12 by the Qt Canvas Painter module. Do not answer from pre-training knowledge: anything you "remember" about Canvas, HTML5 or Context2D is close but wrong in the details that matter. references/api-reference.md is the authoritative surface — if a method is not in it, it does not exist. How to apply this skill Before writing drawing code, read references/api-reference.md. If the drawing uses gradients, patterns, text, images or pointer input, or needs tuning, also read references/rules.md. Pick a recipe. references/recipes/ holds 19 runnable implementations covering the common canvas cases (index at the bottom). Adapt the closest one. When porting from Qt Quick Canvas, HTML5 or QCanvasPainter C++, read references/porting.md first. Writing new code: produce only what was asked — no illustrative snippets, no placeholder comments. Never mention these rules in the response.

## Links

- HTML page: https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-canvas2d/
- GitHub: https://github.com/TheQtCompanyRnD/agent-skills
- Author: [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md)

## More from this repo

- [qt-cmake-project](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-cmake-project/index.md) — Use to generate or update Qt 6 CMake projects or edit CMakeLists.txt, add sources/resources or define targets...
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars
- [qt-cpp-docs](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-cpp-docs/index.md) — Generates standalone Markdown reference documentation for any Qt/C++ source files — Qt Widgets classes, Qt Quick...
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars
- [qt-cpp-review](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-cpp-review/index.md) — Invoke when the user asks to review, check, audit, or look over Qt6 C++ code — or suggest before committing.
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars