https://github.com/haxiomic/html-text-to-canvas

Draw text formatted with HTML to a canvas element, leveraging the browser's layout engine. Useful for generating text for WebGL
https://github.com/haxiomic/html-text-to-canvas

Last synced: 23 days ago
JSON representation

Draw text formatted with HTML to a canvas element, leveraging the browser's layout engine. Useful for generating text for WebGL

• Host: GitHub
• URL: https://github.com/haxiomic/html-text-to-canvas
• Owner: haxiomic
• License: mit
• Created: 2021-05-16T22:23:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-31T12:55:19.000Z (over 3 years ago)
• Last Synced: 2024-04-17T21:42:58.113Z (7 months ago)
• Language: JavaScript
• Size: 45.9 KB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Draw HTML Text to Canvas



Given a HTML string or HTMLElement, `htmlTextToCanvas()` returns a canvas with a replica of the text, including fonts, layout, formatting and colors draw using Context 2D

This technique leverages the browser's built-in text layout engine so all text layouts are supported. It works by determining the location and style of each character and drawing them individually

Another approach is to first convert the html to SVG, embedding fonts and images before drawing the SVG to canvas – this is more fully featured but more complex. For example: https://github.com/bubkoo/html-to-image

Be aware this approach only draws text. For backgrounds, borders, images and other styling you will need to use an approach like [html-to-image](https://github.com/bubkoo/html-to-image)

[Live demo](https://haxiomic.github.io/html-text-to-canvas/demo.html)

-----

## API

```typescript

type Options = {

	/**

	 * Used to increase size canvas texture for higher quality text. By default, the canvas texture has

	 * the same size as the input element in px units. These are decoupled from hardware pixel densities,

	 * so to achieve the same rendering quality, set `pixelRation: window.devicePixelRatio`

	 * 

	 * default 1.0

	 */

	?pixelRatio: number,

	/**

	 * If true, an OffscreenCanvas object will be returned

	 * 

	 * default false

	 */

	?offscreenCanvas: boolean,

	/**

	 * Used to provide a canvas element to draw on, by default `htmlTextToCanvas()` creates a new canvas

	 */

	?overrideCanvas: HTMLCanvasElement | OffscreenCanvas,

}

/**

 * Draw a html string to canvas

 */

function htmlTextToCanvas(htmlString: string, options?: Options): HTMLCanvasElement | OffscreenCanvas;

/**

 * Draw a html element

 */

function htmlTextToCanvas(htmlElement: HTMLElement, options?: Options): HTMLCanvasElement | OffscreenCanvas;

```

### Example: Canvas from a html string

```typescript

let canvas = htmlTextToCanvas('
Header!
', {pixelRatio: window.devicePixelRatio});

document.body.appendChild(canvas);

```


### Example: Canvas from a html element

```typescript

let header = document.createElement('h1');

header.innerHTML = 'Hello World!';

let canvas = htmlTextToCanvas(header, {pixelRatio: window.devicePixelRatio});

document.body.appendChild(canvas);

```