Home

DrawingComponent

The DrawingComponent is a customizable drawing tool built with React. It allows users to draw on a canvas element with configurable stroke color, line width, and drawing modes. Users can also undo actions, clear the canvas, and switch between drawing and filling modes.

Props

• height (number | optional): The height of the canvas. Default is 500.
• width (number | optional): The width of the canvas. Default is 500.
• readonly (boolean | optional): If true, the drawing functionality is disabled and the component is in read-only mode.
• onStartDrawing ((c: HTMLCanvasElement | null) => void | optional): Callback function triggered when drawing starts.
• onDrawing ((c: HTMLCanvasElement | null) => void | optional): Callback function triggered while drawing.
• onStopDrawing ((c: HTMLCanvasElement | null) => void | optional): Callback function triggered when drawing stops.

Features

• Drawing: Draw on the canvas with configurable color and line thickness.
• Filling: Fill areas with a selected color when in fill mode.
• Undo: Revert the last drawing action.
• Clear: Clear the entire canvas.
• Mode Toggle: Switch between drawing mode (Pen) and filling mode.

Usage

import React from 'react';
import DrawingComponent from './DrawingComponent';

const App = () => {
  const handleStartDrawing = (canvas: HTMLCanvasElement | null) => {
    console.log('Started drawing', canvas);
  };

  const handleDrawing = (canvas: HTMLCanvasElement | null) => {
    console.log('Drawing on', canvas);
  };

  const handleStopDrawing = (canvas: HTMLCanvasElement | null) => {
    console.log('Stopped drawing', canvas);
  };

  return (
    <DrawingComponent
      height={600}
      width={800}
      onStartDrawing={handleStartDrawing}
      onDrawing={handleDrawing}
      onStopDrawing={handleStopDrawing}
    />
  );
};

export default App;

Component Details

State Management

The component uses a reducer to manage its internal state, including:

• isDrawing: Boolean indicating if drawing is currently active.
• strokeColor: Color of the drawing stroke.
• lineWidth: Thickness of the drawing stroke.
• history: Array of canvas states used for undo functionality.
• mode: Current mode (Pen or Fill).

Event Handlers

• startDrawing: Initiates a drawing path when the mouse is pressed down.
• draw: Continues drawing as the mouse moves.
• stopDrawing: Ends the drawing path when the mouse is released or leaves the canvas.
• saveHistory: Saves the current canvas state to the history for undo functionality.
• undo: Reverts the canvas to the previous state.
• clearCanvas: Clears the entire canvas.
• handleModeChange: Toggles between Pen and Fill modes.
• handleCanvasClick: Fills the clicked area with the selected color in Fill mode.

Canvas

• Canvas Initialization: Sets up the canvas dimensions and context properties.
• Event Listeners: Adds event listeners to the canvas for drawing, filling, and other interactions based on the current mode.

Styling

The canvas has a border and cursor style that changes based on the current drawing mode:

• Pen Mode: Cursor is a crosshair.
• Fill Mode: Cursor is a pointer.

Notes

• Ensure that the readonly prop is set appropriately to disable interactions when needed.
• The component uses the drawingReducer for state management and various utility functions for operations like flood fill and color conversion.

Feel free to customize the component and its styling to fit your needs!