drawing_fillRectangle
Fill a rectangle on a drawing canvas by specifying coordinates, dimensions, and color values to create colored shapes for visual content.
Instructions
Fill a rectangle on the drawing canvas with a specified color and coordinates.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | Yes | X coordinate of the top-left corner of the rectangle | |
| y | Yes | Y coordinate of the top-left corner of the rectangle | |
| width | Yes | Width of the rectangle | |
| height | Yes | Height of the rectangle | |
| color | Yes | Color to fill the rectangle with (RGB) |
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: [], }, }, ];