skills.rest
patriotnewsactivism
patriotnewsactivismCOMMUNITY
Explore all skills by this author →
GitHub

canvas

Create, manipulate, and query visual elements on a digital canvas.

2|Updated Mar 12, 2026
Search Tags:#design#layout#image#canvas#iframe#shapes#visual elements
One-click install
npx skills add https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner --skill canvas-patriotnewsactivism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner --skill canvas-patriotnewsactivism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows for the programmatic creation, manipulation, and organization of visual elements on an infinite workspace canvas, streamlining the design and layout process.

Core Features & Use Cases

  • Shape Creation: Supports geometric shapes, text, notes, iframes, images, and videos.
  • State Reading: Retrieve the current state of the canvas, including shape positions, types, and properties.
  • Action Application: Apply a series of actions to modify the canvas, such as creating, updating, deleting, moving, resizing, aligning, or distributing shapes.
  • Use Case: Automatically generate a visual sitemap by creating boxes for each page, linking them with lines, and embedding preview iframes for each section.

Quick Start

Create a blue rectangle with the text "My Shape" at position 100, 100 with dimensions 200x150.

Frequently Asked Questions about canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I programmatically create and manipulate visual elements on a digital canvas?▼

You can programmatically create and manipulate visual elements on a digital canvas by applying a series of actions to generate, update, delete, move, resize, align, or distribute shapes using a specific coordinate system.

What types of shapes and visual elements can I add to an infinite workspace canvas?▼

You can add geometric shapes, text, notes, iframes, images, and videos to an infinite workspace canvas, specifying shape properties and precise positions to streamline the layout process.

How do I retrieve the current state of canvas shapes and their properties?▼

Retrieving the current canvas state involves querying the workspace to read shape positions, element types, and specific properties, enabling precise tracking and control over the visual layout.

Can I embed external content like videos and iframes when designing a canvas layout?▼

Yes, you can embed external content by creating iframe and video elements on the canvas, allowing you to integrate interactive previews and media directly within your visual layout.

What is the best way to automatically generate a visual sitemap using a canvas?▼

Automatically generating a visual sitemap involves creating geometric boxes for each page, linking them with lines, and embedding preview iframes for each section directly on the canvas.

Does this canvas manipulation approach require any external dependencies or components?▼

No, this canvas manipulation approach operates without external dependencies or components, utilizing an internal coordinate system and state retrieval logic to manage visual elements natively.

Related Skills

Explore More Design & Creative Skills→
zmrezmre
1

canvas-design

Draw shapes, images, and styled text on HTML Canvas.

Community
Intermediate
gotargotar
26

canvas-design

Translate a design philosophy into a single visual canvas as PDF or PNG.

Community
Advanced
framerslabframerslab

image-gen

Generate, edit, upscale, and style-transfer images via multiple AI providers.

Official
Advanced
ouzayrouzayr

canvas

Create, manipulate, and retrieve visual elements on an infinite canvas.

Community
Intermediate