A simple and efficient library for drawing various shapes on an HTML5 canvas. Easily create and manipulate shapes like circles, rectangles, lines, and more with intuitive methods.

• Draw basic shapes (circles, rectangles, lines, triangles, polygons)
• Customize shapes with colors, borders, and styles
• Clear and update the canvas with ease
• Lightweight and easy to integrate

Install the package using npm:

npm install draw-canvas-shapes

Here's a basic example of how to use the library:

import { DrawCanvasShapes } from 'draw-canvas-shapes';

const canvas = document.getElementById('canvas');

// except for canvas, all other properties are optional, you can pass them as per your requirements

const drawer = new DrawCanvasShapes({
  canvas, // required
  canvasSize: { width: 1000, height: 500 },
  gridSize: 20,
  gridColor: '#ddd',
  showGrid: false,
  drawings: [],
  drawingType: 'polygon',
  drawingColor: '#000',
  drawingMode: 'draw',
  crossIconSize: 10,
  showCrossIcon: true,
  clickThreshold: 20,
  resizeOnCanvasSizeChange: false,
  lineWidth: 2,
});

// use setter methods to update canvas properties as needed
drawer.canvasSize = { width: 1000, height: 500 };
drawer.gridSize = 20;
drawer.showGrid = true;
drawer.drawings = [];
drawer.drawingType = 'polygon';
drawer.drawingColor = '#000';
drawer.drawingMode = 'draw';
drawer.showCrossIcon = true;
drawer.lineWidth = 2;

// use cancelDrawing method to cancel the current drawing
drawer.cancelDrawing();

// use clearCanvas method to clear the canvas
drawer.clearCanvas();

// finally, use drawings getter to get the drawings
const drawings = drawer.drawings;

A class for drawing various shapes on an HTML5 canvas.

new DrawCanvasShapes(options);

• options: DrawCanvasShapesOptions - The options to configure the canvas and drawing properties.
  • canvas: HTMLCanvasElement - The canvas element to draw on.
  • canvasSize: CanvasSize (optional) - The size of the canvas.
    • width: number - The width of the canvas.
    • height: number - The height of the canvas.
  • gridColor: string (optional) - The color of the grid lines.
  • gridSize: number (optional) - The size of the grid cells.
  • showGrid: boolean (optional) - Whether to show the grid or not.
  • drawings: Array<Drawing> (optional) - The initial drawings to display on the canvas.
  • drawingType: DrawingType (optional) - The type of drawing to create (polygon, rectangle, circle, triangle, line).
  • drawingColor: string (optional) - The color of the drawing.
  • drawingMode: DrawingMode (optional) - The mode of drawing (draw, move, resize).
  • crossIconSize: number (optional) - The size of the cross icon.
  • showCrossIcon: boolean (optional) - Whether to show the cross icon or not.
  • clickThreshold: number (optional) - The click threshold for drawing polygons.

• drawings: Array<Drawing> - Gets the current drawings on the canvas.

• cancelDrawing(): void - Cancels the current drawing.
• clearCanvas(): void - Clears the canvas.

A type representing a drawing on the canvas.

type Drawing = {
  type: DrawingType;
  color: string;
  points: Array<Point>;
  radius?: number;
};

• type: DrawingType - The type of drawing (polygon, rectangle, circle, triangle, line).
• color: string - The color of the drawing.
• points: Array<Point> - The points of the drawing.
  • x: number - The x-coordinate of the point.
  • y: number - The y-coordinate of the point.
• radius: number (optional) - The radius of the drawing (for circles).

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

This project is licensed under the ISC License. See the LICENSE file for details.

If you encounter any bugs or issues, please report them on the GitHub Issues page.