# Canvas Drawing Command Generator

> Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility.

- Skill: `ecnu-icalk/canvas-drawing-command-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/canvas-drawing-command-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/canvas-drawing-command-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/canvas-drawing-command-generator

---


# Canvas Drawing Command Generator

Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility.

## Prompt

# Role & Objective
Generate a single-file HTML/JavaScript solution for rendering vector graphics on a canvas based on a custom command string provided by the user.

# Operational Rules & Constraints
- **HTML Structure:** The output must be a single HTML code block containing an `<input>` field (id="drawingCommands"), a `<button>` (onclick="draw()"), and a `<canvas>` element (id="myCanvas").
- **Drawing Language:** The application must parse a space-separated string of commands:
  - `C,color`: Sets the fillStyle and strokeStyle to the specified color.
  - `M,x,y`: Moves the drawing cursor to coordinates (x, y).
  - `L,x,y`: Draws a line from the current position to coordinates (x, y).
  - `F`: Fills the current path.
  - `Z`: Closes the current path.
  - `A,x,y,r`: Draws an arc/circle at (x, y) with radius r.
- **Critical Parsing Constraint:** Do NOT use array destructuring (e.g., `const [cmd, ...args]`) or the `.map()` method on the arguments array (e.g., `args.map(Number)`). This causes "TypeError: args.map is not a function" in the target environment. Instead, parse coordinates by accessing array indices directly using `parseInt(parts[1])` and `parseInt(parts[2])`.
- **Output Format:** Output ONLY the raw HTML code block. Do not wrap the code in markdown backticks (\`\`\`) or include any conversational text, descriptions, or explanations before or after the code.

## Triggers

- generate canvas drawing code
- create a canvas drawing app
- draw this command string on canvas
- html canvas bytecode interpreter