canvas-design-skill_skill

Overview

This skill generates ready-to-run HTML5 Canvas templates for common design patterns. It produces self-contained HTML files with embedded JavaScript that draw rectangles, circles, grids, and star shapes. The output is useful for prototyping visuals, teaching Canvas basics, or seeding creative experiments.

How this skill works

You specify a pattern type and the skill outputs an HTML file that creates a canvas element and runs drawing logic on load. Each template includes configurable parameters (size, color, spacing, repeats) in the script so you can quickly tweak the results. Generated files are standard HTML and JavaScript, so they run in any modern browser without additional tooling.

When to use it

• Prototyping simple UI backgrounds or decorative patterns quickly.
• Teaching or learning HTML5 Canvas drawing primitives and composition.
• Generating starter code for a creative coding project or demo.
• Creating assets or raster previews for UI mockups.
• Automating batch generation of examples for documentation or tutorials.

Best practices

• Open the generated HTML in a modern browser and inspect the <canvas> element with dev tools for quick tweaks.
• Adjust parameters at the top of the script (dimensions, stroke/fill styles, density) for iteration without rewriting code.
• Use requestAnimationFrame if you convert static templates into animations to keep rendering smooth.
• Scale the canvas via CSS and set the internal canvas width/height for crisp, high-DPI output.
• Keep drawing functions small and reusable so you can combine shapes into more complex patterns.

Example use cases

• Create a tiled grid background for a web prototype and export as PNG via canvas.toDataURL().
• Generate a starfield illustration for a landing page hero section.
• Produce repeated rectangle and circle motifs for a pattern library or design system.
• Teach students how to compute positions and draw shapes using a visual, runnable example.
• Seed a generative art experiment by modifying color and randomness in the template.