Skip to content

Latest commit

 

History

History
257 lines (216 loc) · 9.08 KB

CanvasColoring.md

File metadata and controls

257 lines (216 loc) · 9.08 KB

CanvasColoring

Kind: global class
Npmpackage:

new CanvasColoring()

Apply letious color effects to a canvas given a Canvas element or CanvasDrawer instance.

Import from ad-canvas 

import { CanvasColoring } from 'ad-canvas'

All examples in this class demonstrate effects applied to this image:

CanvasColoring.hue(obj)

EXAMPLE::

// convert to full grayscale
CanvasColoring.hue({
	target: _myCanvasDrawer,
	amount: 180,
})

Kind: static method of CanvasColoring

Param Type Description
obj object an object with paramaters for overall hue shift, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
amount number amount to shift the colors in a range of 0-360

CanvasColoring.saturation(obj)

EXAMPLE::

// convert to full grayscale
CanvasColoring.saturation({
	target: _myCanvasDrawer,
	amount: 0,
})

Kind: static method of CanvasColoring

Param Type Description
obj object an object with paramaters for overall saturation, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
amount number a NUMBER representing the total saturation of the target. 0 = grayscale, 1 = full, original color
clear boolean a BOOLEAN which will redraw a CanvasDrawer (but not a canvas DOM element). Defaults to false, which will compound previous effects

CanvasColoring.contrast(obj)

Change the contrast of the target.

EXAMPLE::

// get your whites whiter and brights brighter
CanvasColoring.contrast({
	target: _myCanvasDrawer,
	amount: 10,
})

Kind: static method of CanvasColoring

Param Type Description
obj object an object with paramaters for overall saturation, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
amount number a NUMBER representing the contrast of the target. 0 = no contrast, 1 = original contrast, >1 = more and more, to infinity and beyond!
clear boolean a BOOLEAN which will redraw a CanvasDrawer (but not a canvas DOM element). Defaults to false, which will compound previous effects

CanvasColoring.tint(obj)

Tint the target uniformly to a given color.

EXAMPLE::

// tint to GREEN
CanvasColoring.tint({
	target: _myCanvasDrawer,
	color: 'rgb(0, 255, 0)',
	amount: 1
});




// tint to MAGENTA
CanvasColoring.tint({
	target: _myCanvasDrawer,
	color: {
		r: 255,
		g: 0,
		b: 255
	},
	amount: 1
});




// 50% tint to BLUE
CanvasColoring.tint({
	target: _myCanvasDrawer,
	color: '#0000ff',
	amount: 0.5
});

Kind: static method of CanvasColoring

Param Type Description
obj object an object with paramaters for overall saturation, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
amount number a NUMBER representing the percentage of color to apply to the target. Defaults to 1, which is 100% color tinting
color string | object a HEX, RGB/A STRING, or RGB/A OBJECT represeting the color to tint to. Color-name strings such as 'red' and 'blue' will throw errors
clear boolean a BOOLEAN which will redraw a CanvasDrawer (but not a canvas DOM element). Defaults to false, which will compound previous effects

CanvasColoring.transform(obj)

Color Transforms the target to a given color by pulling colors out of image; preserves shading.

EXAMPLE::

// pulls all colors EXCEPT for GREEN values out of the target
CanvasColoring.transform({
	target: _myCanvasDrawer,
	color: 'rgb(0, 255, 0)',
	amount: 1
});




// pulls all colors EXCEPT for RED and BLUE values out of the target
CanvasColoring.transform({
	target: _myCanvasDrawer,
	color: {
		r: 255,
		g: 0,
		b: 255
	},
	amount: 1
});




// pulls 50% of all colors EXCEPT for BLUE values out of the target
CanvasColoring.transform({
	target: _myCanvasDrawer,
	color: '#0000ff',
	amount: 0.5
});



Kind: static method of CanvasColoring

Param Type Description
obj object an object with paramaters for overall saturation, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
amount number a NUMBER representing the percentage of color to apply to the target. Defaults to 1, which is 100% color transform
color string | object a HEX, RGB/A STRING, or RGB/A OBJECT represeting the color to transform to. Color-name strings such as 'red' and 'blue' will throw errors
clear boolean a BOOLEAN which will redraw a CanvasDrawer (but not a canvas DOM element). Defaults to false, which will compound previous effects.

CanvasColoring.invert(obj)

Invert the colors of the target.

EXAMPLE::

CanvasColoring.invert({
	target: _myCanvasDrawer
});



Kind: static method of CanvasColoring

Param Type Description
obj object an object with parameters for overall inversion, see Properties for more info:

Properties

Name Type Description
target CanvasDrawer | UICanvas | canvas a CanvasDrawer or CANVAS DOM to which the effect is applied
clear boolean a BOOLEAN which will redraw a CanvasDrawer (but not a canvas DOM element). Defaults to false, which will compound previous effects.