@blinkmobile/canvas-manipulation
Advanced tools
Helper functions for manipulating a HTMLCanvasElement
Helper functions for manipulating a HTMLCanvasElement
Install module via npm
npm install @blinkmobile/canvas-manipulation --save
Load this library and use a build step e.g. webpack or browserify
const canvasManipulation = require('@blinkmobile/canvas-manipulation')
// OR
import canvasManipulation from '@blinkmobile/canvas-manipulation'
Or alternatively, load the script straight into a browser and access canvasManipulation globally
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/@blinkmobile/canvas-manipulation/dist/canvas-manipulation.js"></script>
</head>
<body>
...
<script>
// available via window.canvasManipulation
</script>
</body>
</html>
drawImageCentered(canvas: HTMLCanvasElement, image: CanvasImageSource)Draw a CanvasImageSource onto a HTMLCanvasElement
Will center the image onto the canvas if the image is smaller than the canvas
Will scale the image down to fit if the image is bigger than the canvas
resize(canvas: HTMLCanvasElement, width: number, height: number, scaleDown: boolean) : booleanChange the width and/or height of a CanvasImageSource while preserving the current content
Returns true if the canvas content has been preserved
If scaleDown is false and the content is larger than the newly sized canvas, the content will not be preserved
toDataURLCropped(canvas: HTMLCanvasElement, type: string, encoderOptions: number) : stringCreate a DataURL after cropping canvas content of white (transparent, the alpha must be 0) space
type and encoderOptions arguments are optional, see HTMLCanvasElement.toDataURL() Parameters for options and defaults
Returns a DataURL
Check the example directory for a working example or run it yourself:
Install Node 6.x or higher
Clone this repository
Note: The master branch can contain undocumented or backward compatibility breaking changes. You should checkout the latest release before running the demo.
Install dependencies
npm install
Start demo
npm start
1.0.1 - 2017-02-10
babel-preset-es2015FAQs
Helper functions for manipulating a HTMLCanvasElement
We found that @blinkmobile/canvas-manipulation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket found a Rust typosquat (finch-rust) that loads sha-rust to steal credentials, using impersonation and an unpinned dependency to auto-deliver updates.
Research
/Security Fundamentals
A pair of typosquatted Go packages posing as Googleâs UUID library quietly turn helper functions into encrypted exfiltration channels to a paste site, putting developer and CI data at risk.
Security News
November CVE publications fell 25% YoY even as 2025 totals rose, showing how a few major CNAs can swing âglobalâ counts and skew perceived risk.