Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jiakuan/canvas-text
Multiline text on HTML5 Canvas for GWT/Javascript
https://github.com/jiakuan/canvas-text
canvas gwt javascript text-rendering
Last synced: 15 days ago
JSON representation
Multiline text on HTML5 Canvas for GWT/Javascript
- Host: GitHub
- URL: https://github.com/jiakuan/canvas-text
- Owner: jiakuan
- License: apache-2.0
- Created: 2023-07-19T21:51:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-26T21:55:45.000Z (3 months ago)
- Last Synced: 2024-08-27T00:42:22.946Z (3 months ago)
- Topics: canvas, gwt, javascript, text-rendering
- Language: Java
- Homepage: https://canvas-text.docstr.org
- Size: 1.03 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Canvas Text
A Miniscule GWT/Javascript library to render text on HTML5 Canvas with ZERO
dependencies
This project is ported from the TypeScript
project [Canvas-Txt](https://github.com/geongeorge/Canvas-Txt), and rewritten in
Java, so it can be available in GWT projects. The compiled JavaScript is
also available for **pure JavaScript** projects.
Canvas Txt 📐
Transforming Your Canvas with Multiline Magic ✨
## Features
- [x] Multiline text
- [x] Auto line breaks
- [x] Horizontal Align
- [x] Vertical Align
- [x] Justify Align
- [x] Easy Debugging
- [x] Improved Performance
## Demo
Try the library with different options from the online demo: [https://canvas-text.docstr.org/](https://canvas-text.docstr.org/)
## Configure Maven dependency
GWT Uploader is available in Maven central repository:
https://search.maven.org/search?q=org.docstr:canvas-text
To add the dependency to your `build.gradle` (for Gradle projects) or `pom.xml` (for Maven projects), use the following configuration:
For Gradle projects:
```
implementation 'org.docstr:canvas-text:1.0.0'
```
For Maven projects:
```
org.docstr
canvas-text
1.0.0
```
## Options
| Properties | Default | Description |
|:-------------:|:------------:|:-------------------------------------------------------------------------------|
| `width` | **Required** | Width of the text box |
| `height` | **Required** | Height of the text box |
| `x` | **Required** | X position of the text box |
| `y` | **Required** | Y position of the text box |
| `debug` | `false` | Shows the border and align gravity for debugging purposes |
| `align` | `center` | Text align. Other possible values: `left`, `right` |
| `vAlign` | `middle` | Text vertical align. Other possible values: `top`, `bottom` |
| `font` | `Arial` | Font family of the text |
| `fontSize` | `14` | Font size of the text in px |
| `fontStyle` | `''` | Font style, same as css font-style. Examples: `italic`, `oblique 40deg` |
| `fontVariant` | `''` | Font variant, same as css font-variant. Examples: `small-caps`, `slashed-zero` |
| `fontWeight` | `''` | Font weight, same as css font-weight. Examples: `bold`, `100` |
| `lineHeight` | `null` | Line height of the text, if set to null it tries to auto-detect the value |
| `justify` | `false` | Justify text if `true`, it will insert spaces between words when necessary. |
## Methods
| Method | Description |
|:------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `drawText(ctx, text, config)` | To draw the text to the canvas |
| `splitText({ ctx, text, justify, width }` | To split the text `{ ctx: CanvasRenderingContext2D, text: string, justify: boolean, width: number }` |
| `getTextHeight({ ctx, text, style })` | To get the height of the text `{ ctx: CanvasRenderingContext2D, text: string, style: string (font style we pass to ctx.font) }` [ctx.font docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font) |