mcp-painter

Instructions

Implementation Reference

• drawingTool.ts:33-49 (handler)

  Core implementation of the fillRectangle method in the Canvas class. This is the exact logic that fills the rectangle pixels with the given color after validation.

  fillRectangle(x: number, y: number, width: number, height: number, color: Color): void {
      if (!this.isValidCoordinate(x, y) || !this.isValidCoordinate(x + width - 1, y + height - 1)) {
          throw new Error("Rectangle coordinates are out of canvas bounds.");
      }
      if (typeof width !== 'number' || width <= 0 || typeof height !== 'number' || height <= 0) {
          throw new Error("Rectangle dimensions must be positive numbers.");
      }
      if (!this.isValidColor(color)) {
          throw new Error("Invalid color format. Color should be an object with {r, g, b, a} values (0-255 for r, g, b and 0-255 for a).");
      }
  
      for (let rectY = y; rectY < y + height; rectY++) {
          for (let rectX = x; rectX < x + width; rectX++) {
              this.pixels[rectY][rectX] = { ...color }; // Spread to avoid modifying the original color object
          }
      }
  }

• drawingTool.ts:109-114 (handler)

  Exported wrapper function fillRectangle that validates the canvas instance and delegates to the Canvas class method.

  function fillRectangle(canvas: Canvas, x: number, y: number, width: number, height: number, color: Color): void {
      if (!(canvas instanceof Canvas)) {
          throw new Error("Invalid canvas object provided.");
      }
      canvas.fillRectangle(x, y, width, height, color);
  }

• index.ts:107-141 (handler)

  MCP tool handler switch case for 'drawing_fillRectangle'. Validates canvas existence, calls drawingTool.fillRectangle, handles errors and returns result.

  case "drawing_fillRectangle":
    if (!currentCanvas) {
      return {
        content: [{
          type: "text",
          text: "Error: No canvas generated. Please use 'drawing_generateCanvas' first.",
        }],
        isError: true,
      };
    }
    try {
      drawingTool.fillRectangle(
        currentCanvas,
        args.x,
        args.y,
        args.width,
        args.height,
        args.color
      );
      return {
        content: [{
          type: "text",
          text: `Filled rectangle at (${args.x}, ${args.y}) with dimensions ${args.width}x${args.height} and color RGB(${args.color.r},${args.color.g},${args.color.b})`,
        }],
        isError: false,
      };
    } catch (error) {
      return {
        content: [{
          type: "text",
          text: `Failed to fill rectangle: ${(error as Error).message}`,
        }],
        isError: true,
      };
    }

• index.ts:34-58 (schema)

  Input schema and metadata for the 'drawing_fillRectangle' tool, defining parameters x, y, width, height, and color object.

  {
    name: "drawing_fillRectangle",
    description: "Fill a rectangle on the drawing canvas with a specified color and coordinates.",
    inputSchema: {
      type: "object",
      properties: {
        x: { type: "number", description: "X coordinate of the top-left corner of the rectangle" },
        y: { type: "number", description: "Y coordinate of the top-left corner of the rectangle" },
        width: { type: "number", description: "Width of the rectangle" },
        height: { type: "number", description: "Height of the rectangle" },
        color: {
          type: "object",
          description: "Color to fill the rectangle with (RGB)",
          properties: {
            r: { type: "number", description: "Red component (0-255)" },
            g: { type: "number", description: "Green component (0-255)" },
            b: { type: "number", description: "Blue component (0-255)" },
            a: { type: "number", description: "Alpha component (0-255, optional, default 255)" },
          },
          required: ["r", "g", "b"],
        },
      },
      required: ["x", "y", "width", "height", "color"],
    },
  },

• index.ts:21-77 (registration)

  The TOOLS constant array that registers the 'drawing_fillRectangle' tool along with others, used in ListToolsRequestHandler.

  const TOOLS = [
    {
      name: "drawing_generateCanvas",
      description: "Generate a new drawing canvas with specified width and height.",
      inputSchema: {
        type: "object",
        properties: {
          width: { type: "number", description: "Width of the canvas in pixels" },
          height: { type: "number", description: "Height of the canvas in pixels" },
        },
        required: ["width", "height"],
      },
    },
    {
      name: "drawing_fillRectangle",
      description: "Fill a rectangle on the drawing canvas with a specified color and coordinates.",
      inputSchema: {
        type: "object",
        properties: {
          x: { type: "number", description: "X coordinate of the top-left corner of the rectangle" },
          y: { type: "number", description: "Y coordinate of the top-left corner of the rectangle" },
          width: { type: "number", description: "Width of the rectangle" },
          height: { type: "number", description: "Height of the rectangle" },
          color: {
            type: "object",
            description: "Color to fill the rectangle with (RGB)",
            properties: {
              r: { type: "number", description: "Red component (0-255)" },
              g: { type: "number", description: "Green component (0-255)" },
              b: { type: "number", description: "Blue component (0-255)" },
              a: { type: "number", description: "Alpha component (0-255, optional, default 255)" },
            },
            required: ["r", "g", "b"],
          },
        },
        required: ["x", "y", "width", "height", "color"],
      },
    },
    {
      name: "drawing_getCanvasPng", // Changed name to reflect PNG output
      description: "Get the current drawing canvas as a PNG image (base64 encoded).", // Updated description
      inputSchema: {
        type: "object",
        properties: {}, // No input needed to get canvas data
        required: [],
      },
    },
    {
      name: "drawing_getCanvasData",
      description: "Get the current pixel data of the drawing canvas as JSON.",
      inputSchema: {
        type: "object",
        properties: {}, // No input needed to get canvas data
        required: [],
      },
    },
  ];