Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blakewilson/canvas-text-block
Easily render a wrapping block of text in an HTML Canvas Element or Node Canvas
https://github.com/blakewilson/canvas-text-block
canvas graphics image images
Last synced: 2 months ago
JSON representation
Easily render a wrapping block of text in an HTML Canvas Element or Node Canvas
- Host: GitHub
- URL: https://github.com/blakewilson/canvas-text-block
- Owner: blakewilson
- License: mit
- Created: 2021-04-03T06:48:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T16:58:06.000Z (8 months ago)
- Last Synced: 2024-10-10T19:06:30.446Z (3 months ago)
- Topics: canvas, graphics, image, images
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/canvas-text-block
- Size: 574 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# canvas-text-block
Easily render a wrapping block of text in an HTML Canvas Element or [Node Canvas](https://www.npmjs.com/package/canvas)
## Motivation
- There are ways to render individual lines of text in [canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement), but not a wrapping text block. This package solves this problem.
- There are some packages out there that do this in a way, but this implementation adds the ability to specify the `lineHeight` and other styling configurations.
## Usage
### Installation
Install the package:
```bash
npm install canvas-text-block
```
### Importing
You can import the package as a module:
```js
import CanvasTextBlock from "canvas-text-block";
```
Or as CommonJS:
```js
const CanvasTextBlock = require("canvas-text-block");
```
Additionally, there is a UMD build (`/dist/CanvasTextBlock.js`) for use in the browser:
```html
```
It is recommended to use something like [Gulp](https://gulpjs.com/) or [Browserify](http://browserify.org/) if you intend on using Canvas Text Block in the browser.
### Usage
```js
import CanvasTextBlock from 'canvas-text-block'
...
// Create your canvas
const canvas = document.createElement("canvas");
canvas.width = 1000;
canvas.height = 1000;
const options = {
fontSize: 50,
}
// Init the package.
const textBlock = new CanvasTextBlock(
canvas, // An HTML Canvas Element
100, // The x position of the canvas where the text block should start
100, // The y position of the canvas where the text block should start
800, // The width of the text block
800, // The height of the text block
options // An optional options config object
);
// Set the text
textBlock.setText(
"This text block will be rendered in the region specified in the constructor above"
);
```
### Options
```js
const defaultOptions = {
color: "#fff", // Set the color of the text block
fontFamily: "arial", // Set the font family of the text block
fontSize: 16, // Set the font size in pixels
lineHeight: 24, // Set the text line height in pixels
padding: 0, // The padding around the text box in pixels
backgroundColor: "transparent", // Set a background color for the text block
weight: "normal", // Set the font weight
overflow: false, // Should the package overflow lines that do not fit in the text block
ellipsis: true, // If overflow is off, should the last word of the text block have an ellipsis?
};
```
## Examples
For examples, please take a look in the [`examples`](https://github.com/blakewilson/canvas-text-block/tree/master/examples) directory.
## License
This project is licensed under the [MIT license](https://github.com/blakewilson/canvas-text-block/blob/master/LICENSE).