1.0.2 • Published 5 months ago

canvas-draw-text v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

canvas-draw-text

version CI status codecov downloads size license

A utility designed to simplify Canvas text rendering that offers advanced features for text layout, styling, and management on HTML5 Canvas.

旨在简化 Canvas 文本渲染的实用工具函数,它为 HTML5 Canvas 上的文本布局、样式和管理提供高级功能。

Features

  • ✂️ Automatic Text Wrapping
  • 📰 Text Alignment
  • 📊 Rich Text Styling
  • 🧮 Layout Control
  • 🗳️ Overflow Handling
  • 🌏 Detailed Return Data

Installation

npm

npm install canvas-draw-text

browser

https://cdn.jsdelivr.net/npm/canvas-draw-text/dist/index.min.js

Usage

import drawText from 'canvas-draw-text'

// Get your canvas context
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

// Draw text with automatic wrapping
drawText(ctx, 'Your text here', 10, 10, 300, 200, {
	color: '#333',
	font: '16px Arial',
	textAlign: 'left',
	verticalAlign: 'top',
})

Extension Method

You can also extend the CanvasRenderingContext2D prototype to use drawText as a method:

import drawText from 'canvas-draw-text'

// Add the drawText method to the CanvasRenderingContext2D prototype
drawText.use()

// Now you can use it directly on the context
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

ctx.drawText('Your text here', 10, 10, 300, 200, {
	color: '#333',
	textAlign: 'center',
})

API

drawText(ctx, text, x, y, width, height, options)

Draws text on a canvas with advanced layout and styling options.

Parameters

ParameterTypeDefaultDescription
ctxCanvasRenderingContext2DrequiredCanvas 2D context
textstringrequiredText to draw
xnumber0Left position of the drawing area
ynumber0Top position of the drawing area
widthnumbercanvas.widthWidth of the drawing area
heightnumbercanvas.heightHeight of the drawing area
optionsobject{}Configuration options (see below)

Options

OptionTypeDefaultDescription
paddingnumber\|array0Inner padding. Can be a single number or [top, right, bottom, left]
textAlignstring'left'Horizontal alignment: 'left', 'center', 'right'
verticalAlignstring'top'Vertical alignment: 'top', 'middle', 'bottom'
fontstring\|object-Font settings. String format: '16px Arial' or object: {size, family, weight, style}
colorstring'#000'Text color
backgroundColorstring-Text background color
backgroundPaddingnumber\|array0Padding around text for background.
lineHeightnumber1.2Line height multiplier
letterSpacingnumber0Spacing between characters
wrapbooleantrueWhether to automatically wrap text
overflowstring'visible'Overflow handling: 'visible', 'hidden'
textOverflowstring''Text to display when content is truncated, e.g., '...'

Return Value

The function returns an object with the following properties:

PropertyTypeDescription
totalLinesnumberTotal number of lines (including overflow)
linesnumberNumber of visible lines
maxTextHeightnumberHeight of all text lines (including overflow)
maxTextWidthnumberWidth of the widest text line (including overflow)
textHeightnumberHeight of visible text
textWidthnumberWidth of visible text
availableWidthnumberAvailable width for drawing (after padding)
availableHeightnumberAvailable height for drawing (after padding)
overflowbooleanWhether text overflow occurred

Browser Support

Works in all modern browsers that support Canvas API. The library automatically handles browser compatibility issues for text measurements.

License

MIT © Mariner

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1.0.2

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago