https://github.com/petervdn/multiline-canvas-text
Render a string to canvas, breaking it up into multiple lines to fit the given width.
https://github.com/petervdn/multiline-canvas-text
Last synced: 4 months ago
JSON representation
Render a string to canvas, breaking it up into multiple lines to fit the given width.
- Host: GitHub
- URL: https://github.com/petervdn/multiline-canvas-text
- Owner: petervdn
- License: mit
- Created: 2018-07-24T19:46:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-29T19:03:22.000Z (almost 8 years ago)
- Last Synced: 2025-10-21T17:22:57.411Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 250 KB
- Stars: 6
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# multiline-canvas-text
Render a string to canvas, breaking it up into multiple lines to fit the given width.
## install
```sh
npm install multiline-canvas-text
```
## demo
Check out the [interactive example](https://petervdn.github.io/multiline-canvas-text/example/).
## usage
```javascript
import { drawText } from "multiline-canvas-text";
const text = 'The quick brown fox jumps over the lazy dog';
const width = 40; // width in pixels to fit the text
const font = 'Arial'; // font should be available in the page
const fontSize = 20; // in pixels
const lineSpacing = 1; // vertical spacing between the lines
const color = 'white'; // can be any valid css color string: 'black', '#FFF', 'rgba(0,0,0,0.5)', etc
const strokeText = false; // true results in calling strokeText instead of fillText
const align = 'center'; // can be 'left', 'right' or 'center'
const result = drawText(text, width, font, fontSize, lineSpacing, color, strokeText, align);
element.appendChild(result.canvas);
```
The result object contains 3 properties:
* `canvas`: The generated canvas element with the rendered text. This canvas has the width that was given to the `drawText` method, but can obviously vary in height.
* `lines`: An array that shows how the string was broken up into multiple lines, for example: `["The quick brown", "fox jumps over", "the lazy dog"]`
* `cursor`: if you are replicating an interactive textfield in canvas, you may want to add a blinking cursor to increase the user experience. The `cursor` property holds `x` and `y` values for where to draw it. **This value is not correct at the moment!**