PaperDuck

Manipulates a canvas using the native functions of a 2D rendering context.

setup

npm

npm i paperduck

es6

import PaperDuck from 'paperduck';

node

let PaperDuck = require('paperduck');

browser

<script src="https://unpkg.com/paperduck"></script>

The module is globally available as PaperDuck.

members

constructor

new PaperDuck(context)

argument	description
`context`	The 2D rendering context.

let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let duck = new PaperDuck(context);
console.log(instance.canvas === canvas); // => true

static methods

.from(value)

Creates a PaperDuck instance from the given value.

argument	description
`value`	The value to create from.

Supported value types are ...

PaperDuck
HTMLCanvasElement (browser only)
HTMLImageElement (browser only)
OffscreenCanvas (browser only)
Canvas from canvas (node only)

let canvas = document.getElementById('myCanvas');
let duck = PaperDuck.from(canvas);
console.log(duck.canvas === canvas); // => false
let otherDuck = PaperDuck.from(duck);
console.log(otherDuck.canvas === duck.canvas); // => false

.fromExcept(value)

Creates a PaperDuck instance from the given value if it's not one.

argument	description
`value`	The value to create from.

let canvas = document.getElementById('myCanvas');
let duck = PaperDuck.fromExcept(canvas);
console.log(duck.canvas === canvas); // => false
let otherDuck = PaperDuck.fromExcept(duck);
console.log(otherDuck === duck); // => true

.loadFrom(value)

Loads a PaperDuck instance from the given value.

argument	description
`value`	The value to load from.

let duck = await PaperDuck.loadFrom('/path/to/image.jpg');
document.body.appendChild(duck.canvas);

Supported value types are ...

String
URL
Blob (browser only)
HTMLImageElement (browser only)
Buffer (node only)

... and everything the function .from supports.

.loadFromExcept(value)

Loads a PaperDuck instance from the given value if it's not one.

argument	description
`value`	The value to load from.

.blank(width = 0, height = 0)

Creates a PaperDuck instance with a blank transparent canvas of the given size.

argument	description
`width`	The width of the canvas.
`height`	The height of the canvas.

properties

.canvas

The canvas.

.context

The 2D rendering context of the canvas.

.width

The width of the canvas.

let duck = PaperDuck.blank(200, 100);
console.log(duck.width); // => 200

.height

The height of the canvas.

let duck = PaperDuck.blank(200, 100);
console.log(duck.height); // => 100

methods

.resize(width = 'auto', height = 'auto', smoothing)

Resizes the canvas to the given size.

argument	description
`width`	The width of the resized canvas. If the value is `'same'`, the value will be set to the current width. If the value is `'auto'`, the width will be set proportionally to the height.
`height`	The height of the resized canvas. If the value is `'same'`, the value will be set to the current height. If the value is `'auto'`, the height will be set proportionally to the width.
`smoothing`	The smoothing factor. Not supported right now.

let duck = PaperDuck.from(source).resize(300, 'auto');

.crop(left = 0, top = 0, width = 'auto', height = 'auto')

Positions and crops the canvas to the given size.

argument	description
`left`	The left offset of the clipping. A negative value is a right offset.
`top`	The top offset of the clipping. A negative value is a bottom offset.
`width`	The width of the clipped canvas. A negative value reverses the direction. If the value is invalid, the value will be set to the current width.
`height`	The height of the clipped canvas. A negative value reverses the direction. If the value is invalid, the value will be set to the current height.

let duck = PaperDuck.from(source).crop(128, -512, null, 256);

.cropAlign(width = 'auto', height = 'auto', alignment = 'center')

Aligns and crops the canvas to the given size.

argument	description
`width`	The width of the cropped canvas. If the value is invalid, the value will be set to the current width.
`height`	The height of the cropped canvas. If the value is invalid, the value will be set to the current height.
`alignment`	The alignment of the cropping. Possible values are `'left top'`, `'left center'`, `'left bottom'`, `'right top'`, `'right center'`, `'right bottom'`, `'center top'`, `'center center'` and `'center bottom'`. The order of words does not matter. The word `center` can be omitted.

let duck = PaperDuck.from(source).cropAlign(256, 128, 'bottom');

.scale(scaling, smoothing)

Resizes the canvas proportionally by the given factor.

argument	description
`scaling`	The scaling factor. If the value is greater than 1, the scale is an enlargement. If the value is less than 1, the scale is a reduction.
`smoothing`	The smoothing factor.

let duck = PaperDuck.from(source);
let enlargedCanvas = duck.scale(3).canvas;
let reducedCanvas = duck.scale(1/2).canvas;

.scaleToContain(width, height, smoothing)

Scales the canvas proportionally to the minimum of the given size.

argument	description
`width`	The minimum width of the scaled canvas.
`height`	The minimum height of the scaled canvas.
`smoothing`	The smoothing factor.

.scaleToCover(width, height, smoothing)

Scales the canvas proportionally to the maximum of the given size.

argument	description
`width`	The maximum width of the scaled canvas.
`height`	The maximum height of the scaled canvas.
`smoothing`	The smoothing factor.

.contain(width, height, alignment = 'center', smoothing)

Scales the canvas proportionally to the minimum of the given size and crops it.

argument	description
`width`	The width of the final canvas.
`height`	The height of the final canvas.
`alignment`	The alignment of the original canvas.
`smoothing`	The smoothing factor.

.cover(width, height, alignment = 'center', smoothing)

Scales the canvas proportionally to the maximum of the given size and crops it.

argument	description
`width`	The width of the final canvas.
`height`	The height of the final canvas.
`alignment`	The alignment of the original canvas.
`smoothing`	The smoothing factor.

.flipHorizontally()

Flips the canvas horizontally.

.flipVertically()

Flips the canvas vertically.

.rotate90()

Rotates the canvas by 90 degrees clockwise.

.rotate180()

Rotates the canvas by 180 degrees.

.rotate270()

Rotates the canvas by 90 degrees counterclockwise.

.drawForeground(image, alignment = 'center')

Draws an image before the canvas.

argument	description
`image`	An image to draw before.
`alignment`	The alignment of the drawing.

.drawBackground(image, alignment = 'center')

Draws an image behind the canvas.

argument	description
`image`	An image to draw behind.
`alignment`	The alignment of the drawing.

.toDataURL(format = 'image/png', quality = 0.92)

Creates a data URL string representing the content.

argument	description
`format`	The image format.
`quality`	The image quality.

.toImageData()

Creates an ImageData object representing the content.

.toImage(format, quality)

browser only

Creates an HTMLImageElement instance representing the content.

argument	description
`format`	The image format.
`quality`	The image quality.

let duck = PaperDuck.from(source).cover(128, 128);
let image = duck.toImage('image/jpeg', 0.75);
image.style.border = '1px solid BlueViolet';
document.body.appendChild(image);

.saveToImage(format = 'image/png', quality = 0.92)

browser only

Saves an HTMLImageElement instance representing the content.

argument	description
`format`	The image format.
`quality`	The image quality.

let duck = PaperDuck.from(source).cover(128, 128);
let image = await duck.saveToImage('image/jpeg', 0.75);
image.style.border = '1px solid BlueViolet';
document.body.appendChild(image);

.toBlob(format = 'image/png', quality = 0.92)

browser only

Creates a Blob instance representing the content.

argument	description
`format`	The image format.
`quality`	The image quality.

.toBuffer(format = 'image/png', quality = 0.92)

node only

Creates a Buffer instance representing the content.

argument	description
`format`	The image format.
`quality`	The image quality.

paperduck

PaperDuck

setup

npm

es6

node

browser

members

constructor

static methods

properties

methods

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

paperduck

PaperDuck

setup

npm

es6

node

browser

members

constructor

static methods

properties

methods

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads