https://github.com/agilgur5/trim-canvas

A tiny (< 100 LoC) library for trimming whitespace from a canvas element with no dependencies
https://github.com/agilgur5/trim-canvas

blanks canvas remove signature trim whitespace

Last synced: about 1 year ago
JSON representation

A tiny (< 100 LoC) library for trimming whitespace from a canvas element with no dependencies

• Host: GitHub
• URL: https://github.com/agilgur5/trim-canvas
• Owner: agilgur5
• License: other
• Created: 2016-09-01T19:33:53.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-12-08T19:23:17.000Z (over 6 years ago)
• Last Synced: 2025-05-08T21:17:50.699Z (about 1 year ago)
• Topics: blanks, canvas, remove, signature, trim, whitespace
• Language: JavaScript
• Homepage: https://agilgur5.github.io/react-signature-canvas/
• Size: 22.5 KB
• Stars: 71
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# trim-canvas

[![package-json](https://img.shields.io/github/package-json/v/agilgur5/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)

[![releases](https://img.shields.io/github/release/agilgur5/trim-canvas.svg)](https://github.com/agilgur5/trim-canvas/releases)

[![commits](https://img.shields.io/github/commits-since/agilgur5/trim-canvas/latest.svg)](https://github.com/agilgur5/trim-canvas/commits/master)




[![dt](https://img.shields.io/npm/dt/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)

[![dy](https://img.shields.io/npm/dy/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)

[![dm](https://img.shields.io/npm/dm/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)

[![dw](https://img.shields.io/npm/dw/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)




[![build status](https://img.shields.io/travis/agilgur5/trim-canvas/master.svg)](https://travis-ci.org/agilgur5/trim-canvas)

[![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/trim-canvas/master.svg)](https://codecov.io/gh/agilgur5/trim-canvas)




[![NPM](https://nodei.co/npm/trim-canvas.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/package/trim-canvas)

A tiny (< 100 LoC) library for trimming whitespace from a `canvas` element with no dependencies.

## Installation

`npm i -S trim-canvas`

## Usage

```javascript

import trimCanvas from 'trim-canvas'

const canvas = document.createElement('canvas')

// do some drawing on it ...

trimCanvas(canvas)

// now the whitespace has been trimmed

```

If you don't want to mess with your existing canvas, then simply clone the canvas element beforehand.

`trim-canvas` returns the canvas element for easy chaining.

## Example

Can see how `trim-canvas` is used inside of `react-signature-canvas` [here](https://github.com/agilgur5/react-signature-canvas/blob/310bff81813509a4035bedfe50d76e7045a880cb/src/index.js#L53-L64).

It includes a step for cloning the canvas.

## Demo

You can see a demo of `trim-canvas` [here](https://agilgur5.github.io/react-signature-canvas/).

*(N.B. this is the demo for [`react-signature-canvas`](https://github.com/agilgur5/react-signature-canvas) which depends on `trim-canvas`)*

## Credits

Credits go to [@efc](https://github.com/efc) for writing a quick version of this in [this issue](https://github.com/szimek/signature_pad/issues/49#issue-29108215) and to the original [StackOverflow Answer](http://stackoverflow.com/a/12178531/3431180) that was credited in that issue.