@jeisonj/canvas-text

A TypeScript-based canvas text editor with zoom, pan, and text manipulation features.

Features

• Text Editing: Create and edit text blocks on HTML5 canvas
• Zoom & Pan: Mouse wheel zoom and spacebar pan functionality
• Multiple Modes: Text input, text editing, and selection modes
• TypeScript: Full TypeScript support with type definitions
• Interactive: Mouse and keyboard event handling
• Customizable: Font size, colors, and styling options

Installation

# Using npm
npm install @jeisonj/canvas-text

# Using yarn
yarn add @jeisonj/canvas-text

# Using pnpm
pnpm add @jeisonj/canvas-text

Usage

import { initCanvasText } from '@jeisonj/canvas-text';

// Initialize the canvas text editor
initCanvasText('canvas', 800, 600, 'Arial');

// The canvas element should exist in your HTML:
// <canvas id="canvas"></canvas>

API

initCanvasText(canvasSelector: string, canvasWidth: number, canvasHeight: number, fontName: string)

Initializes the canvas text editor with the specified parameters.

• canvasSelector: CSS selector for the canvas element
• canvasWidth: Width of the canvas in pixels
• canvasHeight: Height of the canvas in pixels
• fontName: Font family name (e.g., 'Arial', 'Times New Roman')

Controls

• Mouse Click: Place text cursor or select text blocks
• Keyboard: Type text, use arrow keys for navigation
• Mouse Wheel: Zoom in/out
• Spacebar: Pan the canvas (hold and drag)
• Mode Keys:
  • S: Selection mode
  • X: Text editing mode
  • T: Text input mode
  • Escape: Exit current mode
  • Delete: Delete selected text blocks

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run type checking
npm run type-check

# Watch for changes
npm run watch

License

MIT

Repository

GitHub Repository