Skip to main content
Glama

draw_rectangle

Add rectangular shapes to pixel art projects by specifying coordinates and color, with options for outlines or filled areas to create sprites and animations.

Instructions

Draw a rectangle (outline or filled)

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
projectIdYesProject identifier
layerIndexNoLayer index (default: 0)
frameIndexNoFrame index (default: 0)
x0YesTop-left X coordinate
y0YesTop-left Y coordinate
x1YesBottom-right X coordinate
y1YesBottom-right Y coordinate
colorYesColor in hex format
filledNoWhether to fill the rectangle (default: false)
penSizeNoStroke width for outline (default: 1)

Implementation Reference

  • The actual logic for drawing the rectangle outline.
    export function drawRectangle(
      frame: Frame,
      x0: number,
      y0: number,
      x1: number,
      y1: number,
      color: number | string,
      penSize: number = 1
    ): number {
      const colorInt = typeof color === 'string' ? colorToInt(color) : color;
      const pixels = getRectangleStrokePixels(x0, y0, x1, y1, penSize);
    
      let count = 0;
      for (const [x, y] of pixels) {
        if (frame.containsPixel(x, y)) {
          frame.setPixel(x, y, colorInt);
          count++;
        }
  • The server-side handler that processes the MCP request and calls the drawing function.
    private drawRectangleTool(
      projectId: string,
      layerIndex: number,
      frameIndex: number,
      x0: number,
      y0: number,
      x1: number,
      y1: number,
      color: string,
      filled: boolean,
      penSize: number
    ): object {
      const frame = this.getFrame(projectId, layerIndex, frameIndex);
      const count = filled
        ? drawFilledRectangle(frame, x0, y0, x1, y1, color)
  • The registration of the draw_rectangle tool in the server's tool list.
    name: 'draw_rectangle',
    description: 'Draw a rectangle (outline or filled)',
    inputSchema: {
      type: 'object',
      properties: {
        projectId: {
          type: 'string',
          description: 'Project identifier',

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/yafeiaa/piskel-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server