CanvasObject

A CanvasObject represents an html canvas element and has methods for drawing to the canvas and manipulating pixels. To allow for easeir inheritance this constructor is actually calling the init method, which in turn can be used like a super method.

Constructor

new CanvasObject(canvasopt, widthopt, heightopt, dontPixelateopt, scaleToPixopt)

Parameters:

Name	Type	Attributes	Default	Description
`canvas`	HTMLCanvasElement	<optional>		The canvas html element that this instance will reference, if blank a canvas element is created.
`width`	Number	<optional>	1	The width of the canvas.
`height`	Number	<optional>	1	The height of the canvas.
`dontPixelate`	Number	<optional>	0	If 0 or absent the canvas will be set up to display crisp edges.
`scaleToPix`	Number	<optional>	0	If 1 and dontPixelate is 0 the canvas will be scaled to window.devicePixelRatio if available.

Members

canvas

The html canvas element that this Class is referencing and manipulating.

context

The 2DContext of the canvas element being used.

height

The height of the CanvasObject

pixelDataArray

The getImageData().data Array of pixels from the canavs element being used. This value can be set during init, and to update it use the commit option in methods that have it, or call the update method.

width

The width of the CanvasObject

Methods

clear()

Clears the canvas of any drawings and then updates the pixelDataArray.

copyPixels(source, fromRect, toMoverPoint, copyWidthopt, copyHeightopt, commitopt)

Draws from the source image, from the given rectangle, onto the canvas at the given point.

Parameters:

Name	Type	Attributes	Default	Description
`source`	HTMLImage
`fromRect`	Rectangle
`toMoverPoint`	MoverPoint
`copyWidth`	Number	<optional>
`copyHeight`	Number	<optional>
`commit`	Boolean	<optional>	false	If true calls context.getImageData and updates the pixelDataArray. Typically not needed.

drawCircle(x, y, radius, coloropt, commitopt)

Draws a circle whose center is at the x and y given, with the given radius.

Parameters:

Name	Type	Attributes	Default	Description
`x`	Number
`y`	Number
`radius`	Number
`color`	String	<optional>		If a color is given the circle will be filled with it.
`commit`	Boolean	<optional>	false	If true calls context.getImageData and updates the pixelDataArray. Typically not needed.

drawImage(img, toX, toY, commitopt)

Draws the given image at the x and y location given.

Parameters:

Name	Type	Attributes	Default	Description
`img`	HTMLImg
`toX`	Number
`toY`	Number
`commit`	Boolean	<optional>	false	If true calls context.getImageData and updates the pixelDataArray. Typically not needed.

drawRect(rect, colorStringopt, commitopt)

Draws a rectangle using the Rectangle given.

Parameters:

Name	Type	Attributes	Description
`rect`	Rectangle
`colorString`	String	<optional>	If present the rectangle will be filled with the color.
`commit`	Boolean	<optional>	If true the pixel data will be updated, only needed if pixel data is to be accessed.

drawTriangle(trianglePointX, trianglePointY, width, height, coloropt, horizontalopt, commitopt)

Draws a triangle at the point given.

Parameters:

Name	Type	Attributes	Default	Description
`trianglePointX`	Number
`trianglePointY`	Number
`width`	Number
`height`	Number
`color`	String	<optional>
`horizontal`	Boolean	<optional>	false
`commit`	Boolean	<optional>	false	If true calls context.getImageData and updates the pixelDataArray. Typically not needed.

getPixel(x, y) → {Number}

Returns the color of the pixel at the given x and y location.

Parameters:

Name	Type	Description
`x`	Number
`y`	Number

Returns:

Type: Number

init(canvasopt, widthopt, heightopt, placePixelDataopt, dontPixelateopt, scaleToPixopt)

The init method can be thought of like super. If extending the CanvasObject class call init in your extensions constructor. init sets up the canvas based on the parameters given.

Parameters:

Name	Type	Attributes	Default	Description
`canvas`	HTMLCanvasElement	<optional>		The canvas html element, if one is not given a canvas element is created.
`width`	Number	<optional>	1	The width of the canvas element
`height`	Number	<optional>	1	The height of the canvas element
`placePixelData`	Number	<optional>	0	If present (1 or true) the imageData of the canvas will be stored in the ._pixelData property
`dontPixelate`	Number	<optional>	0	If absent (0 or just not there) the canvas will be set up to render crisp edges.
`scaleToPix`	Number	<optional>	0	If present the canvas will be scaled to window.devicePixelRatio if available, dontPixelate must be 0.

setAlpha(value)

Sets the globalAlpha property of the canvas context.

Parameters:

Name	Type	Description
`value`

setFillStyle(colorString)

Sets the fillStyle property of the canvas context.

Parameters:

Name	Type	Description
`colorString`	String

setPixel(x, y, color, pixelCommitopt, endCommitopt)

Sets a pixel of the canvas to the given color.

Parameters:

Name	Type	Attributes	Default	Description
`x`	Number
`y`	Number
`color`	String
`pixelCommit`	Boolean	<optional>	false	Commit the individual call with putImageData
`endCommit`	Boolean	<optional>	false	You would call this at the end of all setPixel calls to putImageData for the whole canvas.

setStrokeStyle(colorString)

Sets the strokeStyle property of the canvas context.

Parameters:

Name	Type	Description
`colorString`	String

update()

Updates the pixelDataArray, if needing to use getPixel on a canvas that gets redrawn, this method or the commit param of each drawing method needs to be called.

writeText(textopt, toXopt, toYopt, fontopt, fontSizeopt, coloropt, commitopt)

Writes the given text at the x and y given.

Parameters:

Name	Type	Attributes	Default	Description
`text`	String	<optional>		The text to write. No text given would give the string 'undefined'.
`toX`	Number	<optional>	0
`toY`	Number	<optional>	0
`font`	String	<optional>		Default is 'Arial'
`fontSize`	Number	<optional>		Default is 24
`color`	String	<optional>
`commit`	Boolean	<optional>	false	If true calls context.getImageData and updates the pixelDataArray. Typically not needed.