canvas

canvas is a skill for Claude Code, Codex from leeguooooo/chrome-use. It costs 124 tokens per session (1,488 once invoked), scanned A, original, from a forked repository, Apache-2.0.

A skill for working with web interfaces drawn into a canvas, a browser area that shows pixels without ordinary page elements. It covers WebGL, games, maps, 3D viewers, drawing tools, and similar interfaces.

In plain words
What is it for?
Use it to capture canvas images, identify targets by their position, click them by coordinates, and handle interfaces such as game boards, map tiles, voice-room seats, and design canvases.
Why use it?
Normal browser inspection cannot find or name objects drawn inside a canvas. This skill explains how to read the visible image and act by screen coordinates instead.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/leeguooooo/chrome-use/canvas
Any agent
npx skills add leeguooooo/chrome-use --skill canvas
Clone the repo
git clone --depth 1 https://github.com/leeguooooo/chrome-use

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for canvas

README.md
[![agentmods](https://agentmods.dev/badge/skills/leeguooooo/chrome-use/canvas.svg)](https://agentmods.dev/skills/leeguooooo/chrome-use/canvas)
Your own site
<a href="https://agentmods.dev/skills/leeguooooo/chrome-use/canvas"><img src="https://agentmods.dev/badge/skills/leeguooooo/chrome-use/canvas.svg" alt="Measured on agentmods" height="20"></a>
Per session 124 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,488 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin fork From a forked repository.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00124 $0.01488
Opus 5 $0.00062 $0.00744
Sonnet 5 $0.00025 $0.00298
Haiku 4.5 $0.00012 $0.00149

Measured 3d ago against content hash 8d5f5e52eb33, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

canvas scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skill-data/canvas/SKILL.md · 98 lines

How it starts

The opening of the file, as written. The whole thing — 98 lines — stays where its author put it; the contents beside it link to each section on GitHub.

chrome-use canvas / WebGL / games

Canvas / WebGL UIs (game boards, voice-room mic seats, map tiles, design canvases). These paint to a <canvas> — there is no DOM node and no accessibility node behind what you see, so snapshot/find/eval querySelector will never return a ref for them. This is a hard limitation, not a missing feature. To work with them:

  • Read the rendered pixels with chrome-use canvas list then chrome-use canvas capture [selector] <file> (extracts the canvas bitmap), or a normal screenshot of the region — then you interpret it.
  • Act by coordinate: compute the target point and chrome-use click <x> <y> (or box @ref on a container to get its CSS-px box first). Coordinates are the correct tool here — the snapshot-first rule explicitly carves out canvas.
  • On the relay, a coordinate click can drift onto the user's foreground tab; prefer a --launch/owned tab for heavy canvas coordinate work, or confirm the underlying state via the app's backend/API instead of driving the canvas.

Canvas / WebGL apps (games, map & 3D viewers, drawing tools)

These paint everything to a <canvas> and expose almost no accessibility tree, so snapshot comes back near-empty and refs are a dead end. snapshot detects this and prints a one-line hint. Drive them the screenshot way:

chrome-use canvas list                 # enumerate <canvas> elements (size, type)
chrome-use canvas capture out.png      # save the canvas's RENDERED pixels to PNG —
                                          # toDataURL (full backing-store res, e.g.
                                          # Figma 2522x1904), screenshot fallback for
                                          # WebGL w/o preserveDrawingBuffer / tainted.
                                          # Gets the RENDER, not hidden source data
                                          # (those live in the app's binary store/API).
chrome-use screenshot /tmp/s.png       # SEE the state (your only read path —
                                          # eval/get text return nothing useful)
chrome-use click 640 360               # interact by viewport coordinate
chrome-use press d --hold 800          # hold-to-move, precise (timed in-daemon —
                                          # NOT keydown+shell-sleep+keyup, which
                                          # adds ~250ms jitter per round-trip)
chrome-use press Space                 # discrete actions (jump/attack/confirm)

Read the full file on GitHub · 98 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 98 lines · 124 tokens per session scan A 8d5f5e52eb33

Subscribe to this mod's changes

canvas is a skill published in the GitHub repository leeguooooo/chrome-use (160 stars, last pushed yesterday), licensed Apache-2.0. It adds 124 tokens to every session and 1,488 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It comes from a forked repository.

Related

Other skills, from other repositories

surf-codebase

Navigate and modify surf-cli codebase - Chrome extension + native host for AI browser automation. Use for surf-cli code work, architecture questions, implementing browser control/CDP/accessibility/network features.

nicobailon/surf-cli · 42 tokens

annotating-screenshots

Use when a browser screenshot needs markup before it is shown or shared, such as highlighting a value that changed, pointing at a control, labelling a step, or blurring PII out of a capture.

m4ttstack/fast-browser · 47 tokens

openbot-screen-layout

The default layout for every OpenBot configuration screen — PageShell and its prose/wide widths, PageSection and PageRows, Item row composition, the settings-row pattern where a summary and a chevron open a dialog, and the size and variant vocabulary. This is what a new screen looks like unless an instruction says…

CopilotKit/OpenBot · 183 tokens

wcag22-a11y-audit

WCAG 2.2 Accessibility Audit skill that systematically evaluates web pages against 8 core Success Criteria (1.1.1, 1.4.3, 1.4.11, 2.1.1, 2.1.2, 2.4.3, 2.4.7, 4.1.2) using accessibility tree inspection and visual analysis. Use this skill when you need to perform accessibility testing/auditing on a live webpage.

AIPexStudio/AIPex · 111 tokens

ux-audit-walkthrough

Minimalist UX/Interaction Audit Expert that deconstructs complex interactions through cognitive load and operational efficiency lenses. Use this skill when you need to perform a UX walkthrough audit on a Figma prototype or web interface, evaluating usability based on principles like fewer clicks, less UI elements, no…

AIPexStudio/AIPex · 73 tokens

surf

Control Chrome browser via CLI for testing, automation, and debugging. Use when the user needs browser automation, screenshots, form filling, page inspection, network/CPU emulation, DevTools streaming, or AI queries via ChatGPT/Gemini/Perplexity/Grok/AI Studio.

nicobailon/surf-cli · 60 tokens