CanvasIO | Class: Canvas

new Canvas(options)

Class representing a canvas

Parameters:

Name Type Description

options

Object

Options for the canvas creation

Properties

Name	Type	Attributes	Description
`width`	Number	<optional>	The width of the canvas
`height`	Number	<optional>	The height of the canvas
`container`	HTMLElement	<optional>	The parent element of the canvas
`preset`	"fullscreen" \| "small"	<optional>	If preset is present, it will bypass all other options and initialize the canvas with the preset

Source:

index.js, line 12

Classes

Canvas

Members

canvas :HTMLCanvasElement

The canvas element object

Type:

HTMLCanvasElement

Source:

index.js, line 26

context :CanvasRenderingContext2D

Context of the canvas

Type:

CanvasRenderingContext2D

Source:

index.js, line 60

filters :FilterManager

Filters for the canvas

Type:

FilterManager

Source:

index.js, line 65

Methods

applyFilter(filter) → {void}

Applies a filter to the canvas

Parameters:

Name	Type	Description
`filter`	Filter	Filter to be applied

Source:

index.js, line 451

Returns:

Type: void

clear() → {void}

Clears the canvas

Source:

index.js, line 169

Returns:

Type: void

clearFilters() → {void}

Clears all filters

Source:

index.js, line 474

Returns:

Type: void

clearRect(x, y, width, height) → {void}

Clears a rectangle

Parameters:

Name	Type	Description
`x`	Number	The x coordinate of the upper left corner of the rectangle
`y`	Number	The y coordinate of the upper left corner of the rectangle
`width`	Number	The width of the rectangle
`height`	Number	The height of the rectangle

Source:

index.js, line 229

Returns:

Type: void

createPath() → {Path}

Creates a path

Source:

index.js, line 492

Returns:

Type: Path

drawGrid(width)

Draws a grid

Parameters:

Name	Type	Default	Description
`width`	Number	50	How far apart should the lines of the grid be

Source:

index.js, line 179

drawImage(image, x, y) → {void}

Draws an image to the canvas

Parameters:

Name	Type	Description
`image`	Image	The image to be drawn
`x`	Number	The X coordinate of the upper left corner
`y`	Number	The Y coordinate of the upper left corner

Source:

index.js, line 426

Returns:

Type: void

drawLine(A, B) → {void}

Parameters:

Name Type Description

A

Object

Point A

Properties

Name	Type	Attributes	Description
`x`	Number	<optional>	The x coordinate
`y`	Number	<optional>	The y coordinate

B

Object

Point B

Properties

Name	Type	Attributes	Description
`x`	Number	<optional>	The x coordinate
`y`	Number	<optional>	The y coordinate

Source:

index.js, line 83

Returns:

Type: void

fillRect(x, y, width, height) → {void}

Fills a rectangle

Parameters:

Name	Type	Description
`x`	Number	The x coordinate of the upper left corner of the rectangle
`y`	Number	The y coordinate of the upper left corner of the rectangle
`width`	Number	The width of the rectangle
`height`	Number	The height of the rectangle

Source:

index.js, line 218

Returns:

Type: void

getAllFilters() → {FilterManager}

Returns all the filters

Source:

index.js, line 459

Returns:

Type: FilterManager

getImageData(rectangle) → {ImageData}

Returns ImageData object with pixels from the rectangle from the canvas

Parameters:

Name Type Description

rectangle

Object

Object represnting the rectangle

Properties

Name	Type	Description
`x`	Number	The x coordinate of the upper left corner of the rectangle
`y`	Number	The y coordinate of the upper left corner of the rectangle
`width`	Number	The width of the rectangle
`height`	Number	The height of the rectangle

Source:

index.js, line 443

Returns:

Type: ImageData

getLineDash() → {LineDashPattern}

Gets the line dashing pattern

Source:

index.js, line 318

Returns:

Type: LineDashPattern

getTransform() → {DOMMatrix2DInit}

Gets the transform matrix

Source:

index.js, line 154

Returns:

Type: DOMMatrix2DInit

load() → {void}

Loads the last saved canvas from the stack

Source:

index.js, line 243

Returns:

Type: void

rect(x, y, width, height) → {void}

Draws a rectangle outline

Parameters:

Name	Type	Description
`x`	Number	The x coordinate of the upper left corner of the rectangle
`y`	Number	The y coordinate of the upper left corner of the rectangle
`width`	Number	The width of the rectangle
`height`	Number	The height of the rectangle

Source:

index.js, line 207

Returns:

Type: void

removeFilter(filter)

Removes a filter

Parameters:

Name	Type	Description
`filter`	Number \| Filter

Source:

index.js, line 466

rotate(angle) → {void}

Rotates the canvas

Parameters:

Name	Type	Description
`angle`	Number	Angle of rotation in radians

Source:

index.js, line 147

Returns:

Type: void

save() → {void}

Saves the currect state of the canvas to stack. Can be restored using Canvas.load()

Source:

index.js, line 236

Returns:

Type: void

scale(x, y) → {void}

Scales the canvas

Parameters:

Name	Type	Default	Description
`x`	Number	1	X axis scale
`y`	Number	1	Y axis scale

Source:

index.js, line 139

Returns:

Type: void

setDirection(direction) → {void}

Sets text direction

Parameters:

Name	Type	Default	Description
`direction`	"ltr" \| "rtl" \| "inherit"	inherit	Direction of the text

Source:

index.js, line 358

Returns:

Type: void

setFill(style) → {void}

Sets the fill style

Parameters:

Name	Type	Description
`style`	String \| CanvasGradient \| CanvasPattern	Syle of fill (color \| gradient \| image)

Source:

index.js, line 366

Returns:

Type: void

setFont(font) → {void}

Sets the font style

Parameters:

Name	Type	Description
`font`	String	String represnting the css style font

Source:

index.js, line 334

Returns:

Type: void

setGlobalAlpha(alpha) → {void}

Sets global alpha for all drawn objects

Parameters:

Name	Type	Description
`alpha`	Number	Number between 0 and 1 representing the global alpha value

Source:

index.js, line 408

Returns:

Type: void

setGlobalCompositeOperation(operation)

Sets the global composite operation. For more information about operations visit offical MDN documentation

Parameters:

Name	Type	Description
`operation`	"source-over" \| "source-in" \| "source-out" \| "source-atop" \| "destination-over" \| "destination-in" \| "destination-out" \| "destination-atop" \| "lighter" \| "copy" \| "xor" \| "multiply" \| "screen" \| "overlay" \| "darken" \| "lighten" \| "color-dodge" \| "color-burn" \| "hard-light" \| "soft-light" \| "difference" \| "exclusion" \| "hue" \| "saturation" \| "color" \| "luminosity"	The operation

Source:

index.js, line 416

setImageSmooth(imageSmoothingMode) → {void}

Sets the image smoothing

Parameters:

Name	Type	Description
`imageSmoothingMode`	"disabled" \| "low" \| "medium" \| "high"

Source:

index.js, line 483

Returns:

Type: void

setLineCap(cap) → {void}

Sets the type of line endings

Parameters:

Name	Type	Default	Description
`cap`	"butt" \| "round" \| "square"	butt	Type of cap

Source:

index.js, line 281

Returns:

Type: void

setLineDash(lineWidth) → {void}

Sets the spacing of a line

Parameters:

Name	Type	Description
`lineWidth`	Array.<Number>

Source:

index.js, line 311

Returns:

Type: void

setLineDashOffset(offset) → {void}

Sets the line dash offset

Parameters:

Name	Type	Description
`offset`	Number	The offset of the line dash

Source:

index.js, line 326

Returns:

Type: void

setLineJoin(join) → {void}

Sets the type of corners where two lines meet

Parameters:

Name	Type	Default	Description
`join`	"round" \| "bevel" \| "miter"	miter	Type of line join

Source:

index.js, line 289

Returns:

Type: void

setLineWidth(width) → {void}

Sets line width

Parameters:

Name	Type	Description
`width`	Number

Source:

index.js, line 273

Returns:

Type: void

setMiterLimit(limit) → {void}

Sets the miter limit

Parameters:

Name	Type	Description
`limit`	Number

Source:

index.js, line 297

Returns:

Type: void

setShadowBlur(level) → {void}

Sets the shadow blur. Default is 0, higher level is more blur

Parameters:

Name	Type	Description
`level`	Number	Blur level

Source:

index.js, line 382

Returns:

Type: void

setShadowColor(color) → {void}

Sets the shadow color

Parameters:

Name	Type	Description
`color`	String	CSS style color

Source:

index.js, line 390

Returns:

Type: void

setShadowOffset(xnullable, ynullable) → {void}

Sets shadow offset

Parameters:

Name	Type	Attributes	Description
`x`	Number	<nullable>	X shadow offset
`y`	Number	<nullable>	Y shadow offset

Source:

index.js, line 399

Returns:

Type: void

setStroke(style) → {void}

Sets the stroke style

Parameters:

Name	Type	Description
`style`	String \| CanvasGradient \| CanvasPattern	Syle of stroke (color \| gradient \| image)

Source:

index.js, line 374

Returns:

Type: void

setTextAlign(textAlign) → {void}

Sets the text align

Parameters:

Name	Type	Default	Description
`textAlign`	"start" \| "end" \| "left" \| "right" \| "center"	start	Text align type

Source:

index.js, line 342

Returns:

Type: void

setTextBaseline(textBaseline) → {void}

Sets the test baseline

Parameters:

Name	Type	Default	Description
`textBaseline`	"top" \| "hanging" \| "middle" \| "alphabetic" \| "ideographic" \| "bottom"	alphabetic	Text baseline style

Source:

index.js, line 350

Returns:

Type: void

setTransform(transform) → {void}

Sets the transform matrix

Parameters:

Name	Type	Description
`transform`	DOMMatrix2DInit

Source:

index.js, line 162

Returns:

Type: void

text(text, x, y, maxWidthnullable) → {void}

Draws a text on the canvas

Parameters:

Name	Type	Attributes	Description
`text`	String		Text to be drawn on canvas
`x`	Number		The x coordinate of the upper left corner of the text
`y`	Number		The y coordinate of the upper left corner of the text
`maxWidth`	Number	<nullable>	Max width of the text

Source:

index.js, line 254

Returns:

Type: void

textOutline(text, x, y, maxWidthnullable) → {void}

Draws a text outline on the canvas

Parameters:

Name	Type	Attributes	Description
`text`	String		Text to be drawn on canvas
`x`	Number		The x coordinate of the upper left corner of the text
`y`	Number		The y coordinate of the upper left corner of the text
`maxWidth`	Number	<nullable>	Max width of the text

Source:

index.js, line 265

Returns:

Type: void

transform(optionsnullable) → {void}

Transforms the canvas according to the provided properties. If no options argument provided, this function will reset the transformation.

Parameters:

Name Type Attributes Description

options

Object

Properties

Name	Type	Attributes	Description
`x`	Number	<optional> <nullable>	The x coordinate of the [0, 0] point
`y`	Number	<optional> <nullable>	The y coordinate of the [0, 0] point
`xScale`	Number	<optional> <nullable>	The scaling factor of the x axis
`yScale`	Number	<optional> <nullable>	The scaling factor of the y axis
`rotation`	Number	<optional> <nullable>	The rotation of the plane in radians

Source:

index.js, line 109

Returns:

Type: void

translate(x, y) → {void}

Moves the zero point of the canvas

Parameters:

Name	Type	Default	Description
`x`	Number	0	X axis move
`y`	Number	0	Y axis move

Source:

index.js, line 130

Returns:

Type: void