paperduck v20.0.0

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)

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.

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.

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.

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.

.blank(width = 0, height = 0)

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

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.

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.

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.

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

.scale(scaling, smoothing)

Resizes the canvas proportionally by the given 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.

.scaleToCover(width, height, smoothing)

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

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

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

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

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

.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.

.drawBackground(image, alignment = 'center')

Draws an image behind the canvas.

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

Creates a data URL string representing the content.

.toImageData()

Creates an ImageData object representing the content.

.toImage(format, quality)

browser only

Creates an HTMLImageElement instance representing the content.

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.

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.

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

node only

Creates a Buffer instance representing the content.