Canvas drawing command generator
Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8/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.From its SKILL.md
npx -y skills add ECNU-ICALK/AutoSkill --skill canvas-drawing-command-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
SKILL.md
2.3 KB, 411 tokens by cl100k_base, as published. Nobody here has run it
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 usingparseInt(parts[1])andparseInt(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
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.