# fontpath-simple-renderer

> a simplified wrapper for fontpath-renderer

Latest version **4.0.0** (published 2015-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install fontpath-simple-renderer
pnpm add fontpath-simple-renderer
yarn add fontpath-simple-renderer
bun add fontpath-simple-renderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2015-03-10 |
| First published | 2014-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |
| Keywords | fontpath, renderer, glyph, text, font, render, canvas, webgl |

## Links

- npm: https://www.npmjs.com/package/fontpath-simple-renderer
- Repository: https://github.com/mattdesl/fontpath-simple-renderer
- Issues: https://github.com/mattdesl/fontpath-simple-renderer/issues
- npm.io page: https://npm.io/package/fontpath-simple-renderer

## Dependencies (2)

- [inherits](https://npm.io/package/inherits.md) ^2.0.1
- [fontpath-renderer](https://npm.io/package/fontpath-renderer.md) ^4.0.0

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2015-03-10
- 3.1.0 — 2014-10-20
- 3.0.3 — 2014-10-20
- 3.0.2 — 2014-10-18
- 3.0.1 — 2014-10-18
- 3.0.0 — 2014-10-18
- 2.0.3 — 2014-10-17
- 2.0.2 — 2014-10-17
- 2.0.1 — 2014-10-17
- 2.0.0 — 2014-10-17
- 1.0.2 — 2014-10-17
- 1.0.1 — 2014-08-18
- 1.0.0 — 2014-08-17

## README

# fontpath-simple-renderer

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

This is a generic module that various render engines (GL, canvas, etc) can use to draw [fontpath glyphs](https://github.com/mattdesl/fontpath) to the screen. Most users are encouraged to use the higher level modules, [fontpath-canvas](https://github.com/mattdesl/fontpath-canvas) for 2D canvas, [fontpath-gl](https://github.com/mattdesl/fontpath-gl) for WebGL.

## Usage

[![NPM](https://nodei.co/npm/fontpath-simple-renderer.png)](https://nodei.co/npm/fontpath-simple-renderer/)

```js
var options = {
	font: MyFont,
	fontSize: 32,
	//etc..
}

var renderer = require('fontpath-simple-renderer')(options)

//set up some parameters
renderer.align = 'right'
renderer.wordwrap.mode = 'pre'
renderer.layout(250)

//renders glyphs and underline data
var result = renderer.render(x, y, startIndex, endIndex)

//handle underlines
result.underlines.forEach(function(item) {
	console.log( item.position, item.size )
})

//handle glyphs
result.glyphs.forEach(function(item) {
	//	draw/manipulate the glyph data
	console.log( item.index, item.position, item.scale, item.glyph, item.charCode )
})
```

### `renderer = Renderer([options])`

Creates a new renderer with the given options. These are optional.

Possible options:
- `font` the Font object
- `fontSize` the font size in pixels, defaults to what is defined in `font`
- `text` the string of text we will be rendering
- `align` a string 'left', 'center', 'right', default left
- `underline` boolean, whether to underline, default false
- `underlinePosition` the position of underline, leave undefined to compute automatically
- `underlineThickness` the underline thickness, leave undefined to compute automatically
- `lineHeight` the line height in pixels, default to an automatic value
- `letterSpacing` the letter spacing in pixels, defaults to zero
- `wrapMode` same as setting `renderer.wordwrap.mode`, can be `normal`, `pre`, or `nowrap`
- `wrapWidth` an initial number in pixels which is passed to `layout()` after the other options have been set. Otherwise, defaults to no layout (a single line, no breaks)

### `renderer.render(x, y, start, end)`

"Renders" the text and returns a `data` object with `underlines` and `glyphs` information:

```js
{
	underlines: [
		{ position: [x,y], size: [width,height] },
		//etc...
	],
	glyphs: [
		{ 
			charCode: 40,
			position: [x,y], 
			index: i, //character index in 'text' string
			scale: [x,y],
			glyph: glyphData //contains fontpath glyph data
		},
		//etc..
	]
}
```

The `x` and `y` parameters default to zero. The `start` and `end` indices allow you to control how much of the layout to draw; this is useful for styling or adding underlines to specific words. It will draw the glyphs within the given indices (start inclusive, end exclusive) as they would sit if the whole layout was rendered. If unspecified, the whole string is rendered.

### `renderer.clearLayout()`

Clears the current layout. The next render will draw all glyphs as if they are on a single line (no line breaks). This occurs whenever you change font, font size, or text.

### `renderer.layout(wrapWidth)`

Forces a new word wrap layout. This should be called after the layout has been cleared, and before rendering. It uses the current settings from the `renderer.wordwrap` instance. 

### `renderer.getBounds([includeUnderline, out])`

Gets the `{ x, y, width, height}` bounds of the current text layout. The height does not extend past the baseline of the last line unless `includeUnderline` is true, in which case the underline's position and height is included in the calculation. 

The bounding y position is offset so that the box has an upper-left origin, for parity with HTML5 canvas rendering.

If `out` is specified, it will re-use that object, otherwise it will create a new one.

### `renderer.getDescender()`

Utility method to get the font's descender.

### `renderer.getAscender()`

Utility method to get the font's ascender.

## members

### `renderer.font` (Font object)
### `renderer.fontSize` (number)
### `renderer.text` (string)

Some font, font size and text parameters. Changing these values will clear the current layout.

### `renderer.underline` (bool)
### `renderer.underlinePosition` (number, in pixels)
### `renderer.underlineThickness` (number, in pixels)

Some underline parameters. If position or thickness is undefined, they will be computed automatically based on font information.

### `renderer.align` (string)

A string which indicates the align mode; `"left"`, `"right"`, or `"center"`. 

### `renderer.wordwrap` 

An instance of [fontpath-wordwrap](https://github.com/mattdesl/fontpath-wordwrap) which controls how layout is done.

### `renderer.lineHeight` (px)
### `renderer.letterSpacing` (px)

# Note on `fontpath-renderer`

This is a simplified wrapper for [fontpath-renderer](https://github.com/mattdesl/fontpath-renderer/) that doens't involve subclassing anything. This has a slight overhead of GC thrashing and doesn't allow you to render glyphs on demand (as they are being laid out) but the difference is small for most applications.

## Running the Demo

```sh
git clone https://github.com/mattdesl/fontpath-simple-renderer.git
cd fontpath-simple-renderer
npm install
npm start
```

Then open `localhost:9966` in your browser. 

## License

MIT, see [LICENSE.md](http://github.com/mattdesl/fontpath-simple-renderer/blob/master/LICENSE.md) for details.

---
_Source: https://npm.io/package/fontpath-simple-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._