Interactive Canvas Drawing Tool

Build a type-safe interactive canvas drawing tool that demonstrates advanced event handling patterns in React. The tool should support mouse drawing, keyboard shortcuts, touch gestures for mobile devices, and proper modifier key detection.

Requirements

Drawing Functionality

The canvas should support drawing with the mouse:

• Users can draw by clicking and dragging on a canvas element
• Drawing should start on mouse down, continue on mouse move while pressed, and stop on mouse up
• Track and display the current mouse position coordinates relative to the canvas

Keyboard Shortcuts

Implement keyboard shortcuts with proper modifier key detection:

• Ctrl/Cmd + Z: Undo the last drawn stroke
• Ctrl/Cmd + Shift + Z: Redo a previously undone stroke
• Escape: Clear the entire canvas
• C (without modifiers): Toggle color between black and red

Touch Support

Add touch event support for mobile devices:

• Users should be able to draw using touch on touch-enabled devices
• Detect and display swipe gestures (up, down, left, right) when no drawing is in progress
• Prevent default touch behavior to avoid page scrolling during drawing

Event Delegation and Proper Typing

• All event handlers must be properly typed using React event types
• Event handlers should correctly type the target element
• Use proper event type discrimination for different event types

Test Cases

• Clicking and dragging the mouse draws a line on the canvas @test
• Pressing Ctrl+Z removes the last drawn stroke from the canvas @test
• Pressing Escape key clears all strokes from the canvas @test
• Touch events on the canvas draw lines similar to mouse events @test

Implementation

@generates

API

import React from 'react';

/**
 * A single drawing stroke on the canvas
 */
interface Stroke {
  points: Array<{ x: number; y: number }>;
  color: string;
}

/**
 * Props for the CanvasDrawingTool component
 */
interface CanvasDrawingToolProps {
  width?: number;
  height?: number;
  initialColor?: string;
}

/**
 * Interactive canvas drawing tool with advanced event handling
 */
export function CanvasDrawingTool(props: CanvasDrawingToolProps): React.JSX.Element;

Dependencies { .dependencies }

@types/react { .dependency }

Provides TypeScript type definitions for React, including comprehensive event types for mouse, keyboard, touch, and other DOM events.

@satisfied-by