Class Index | File Index

## Classes

- _global_
- Array
- fabric.Circle
- fabric.Color
- fabric.Element
- fabric.Element#cache
- fabric.Ellipse
- fabric.Group
- fabric.Image
- fabric.Intersection
- fabric.Line
- fabric.Object
- fabric.Path
- fabric.PathGroup
- fabric.Point
- fabric.Polygon
- fabric.Polyline
- fabric.Rect
- fabric.Text
- fabric.Triangle
- fabric.util
- fabric.util.array
- fabric.util.object
- fabric.util.string
- Function
- String

# Class fabric.Element

fabric.Element
Defined in: element.class.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| fabric.Element(el, options)

Field Summary
Field Attributes | Field Name and Description
--- | ---
<static> | fabric.Element.ATTRIBUTE_NAMES
| backgroundColor
<constant> | CANVAS_HEIGHT
<constant> | CANVAS_WIDTH
<static> | fabric.Element.EMPTY_JSON
| freeDrawingColor
| freeDrawingLineWidth
| includeDefaultValues
| selectionBorderColor
| selectionColor
| selectionLineWidth
| shouldCacheImages

Method Summary
Method Attributes | Method Name and Description
--- | ---
| add() Adds objects to canvas, then renders canvas; Objects should be instances of (or inherit from) fabric.Object
| bringForward(object) Moves an object one level up in stack of drawn objects
| bringToFront(object) Moves an object to the top of the stack of drawn objects
| calcOffset() Calculates canvas element offset relative to the document This method is also attached as "resize" event handler of window
| centerObjectH(object) Centers object horizontally.
| centerObjectV(object) Centers object vertically.
| clear() Clears all contexts (background, main, top) of an instance
| clearContext(context) Clears specified context of canvas element
| clone(callback) Clones canvas instance
| complexity() Returns number representation of an instance complexity
| containsPoint(e, target) Applies one implementation of 'point inside polygon' algorithm
| deactivateAll() Deactivates all objects by calling their setActive(false)
| deactivateAllWithDispatch() Deactivates all objects and dispatches appropriate events
| dispose() Clears a canvas element and removes all event handlers.
| findTarget(e, skipGroup) Method that determines what object we are clicking on
| fxCenterObjectH(object, callbacks) Centers object horizontally with animation.
| fxCenterObjectV(object, callbacks) Centers object vertically with animation.
| fxRemove(object, callback) Same as `fabric.Element#remove` but animated
| fxStraightenObject(object) Same as `fabric.Element#straightenObject`, but animated
| getActiveGroup() Returns currently active group
| getActiveObject() Returns currently active object
| getCenter() Returns coordinates of a center of canvas.
| getContext() Returns topmost canvas context
| getElement() Returns <canvas> element corresponding to this instance
| getHeight() Returns canvas height
| getObjects() Returns an array of objects this instance has
| getPointer(e) Returns pointer coordinates relative to canvas.
| getWidth() Returns canvas width
| insertAt(object, index) Inserts an object to canvas at specified index and renders canvas.
| isEmpty() Returns true if canvas contains no objects
| item(index) Returns object at specified index
| loadFromDatalessJSON(json, callback) Populates canvas with data from the specified dataless JSON JSON format must conform to the one of `fabric.Element#toDatalessJSON`
| loadFromJSON(json, callback) Populates canvas with data from the specified JSON JSON format must conform to the one of `fabric.Element#toJSON`
| loadImageFromURL(url, callback) Loads an image from URL
| loadSVGFromURL(url, callback) Takes url corresponding to an SVG document, and parses it to a set of objects
| onBeforeScaleRotate(target) Callback; invoked right before object is about to be scaled/rotated
| onFpsUpdate(fps) Callback; invoked on every redraw of canvas and is being passed a number indicating current fps
| remove(object) Removes an object from canvas and returns it
| removeActiveGroup() Removes currently active group
| removeActiveObject() Removes currently active object
| renderAll(allOnTop) Renders both the top canvas and the secondary container canvas.
| renderTop() Method to render only the top canvas.
| sendBackwards(object) Moves an object one level down in stack of drawn objects
| sendToBack(object) Moves an object to the bottom of the stack of drawn objects
| setActiveGroup(group) Sets active group to a speicified one
| setActiveObject(object) Sets given object as active
| setDimensions(dimensions) Sets dimensions (width, height) of this canvas instance
| setHeight(height) Sets height of this canvas instance
| setOverlayImage(url, callback) Sets overlay image for this canvas
| setWidth(width) Sets width of this canvas instance
| straightenObject(object) Straightens object, then rerenders canvas
<static> | fabric.Element.supports(methodName) Provides a way to check support of some of the canvas methods (either those of HTMLCanvasElement itself, or rendering context)
| toDatalessJSON() Returs dataless JSON representation of canvas
| toDatalessObject() Returns dataless object representation of canvas
| toDataURL(format) Exports canvas element to a dataurl image.
| toDataURLWithMultiplier(format, multiplier) Exports canvas element to a dataurl image (allowing to change image size via multiplier).
<static> | fabric.Element.toGrayscale(canvasEl) Takes <canvas> element and transforms its data in such way that it becomes grayscale
| toJSON() Returs JSON representation of canvas
| toObject() Returns object representation of canvas
| toString() Returns a string representation of an instance

Class Detail
fabric.Element(el, options)

Parameters:
{HTMLElement | String} el
  <canvas> element to initialize instance on
{Object} options Optional
  Options object

Field Detail
<static> fabric.Element.ATTRIBUTE_NAMES
Defined in: line.class.js.

See:
  http://www.w3.org/TR/SVG/shapes.html#LineElement

{String} backgroundColor

<constant> {Number} CANVAS_HEIGHT

<constant> {Number} CANVAS_WIDTH

<static> {String} fabric.Element.EMPTY_JSON

{String} freeDrawingColor

{Number} freeDrawingLineWidth

{Boolean} includeDefaultValues

{String} selectionBorderColor

{String} selectionColor

{Number} selectionLineWidth

{Boolean} shouldCacheImages
Method Detail
{fabric.Element} add()
Adds objects to canvas, then renders canvas; Objects should be instances of (or inherit from) fabric.Object

Returns:
  {fabric.Element} thisArg

{fabric.Element} bringForward(object)
Moves an object one level up in stack of drawn objects

Parameters:
object
  {fabric.Object} Object to send

Returns:
  {fabric.Element} thisArg

{fabric.Element} bringToFront(object)
Moves an object to the top of the stack of drawn objects

Parameters:
object
  {fabric.Object} Object to send

Returns:
  {fabric.Element} thisArg

{fabric.Element} calcOffset()
Calculates canvas element offset relative to the document This method is also attached as "resize" event handler of window

Returns:
  {fabric.Element} instance

{fabric.Element} centerObjectH(object)
Centers object horizontally.

Parameters:
{fabric.Object} object
  Object to center

Returns:
  {fabric.Element} thisArg

{fabric.Element} centerObjectV(object)
Centers object vertically.

Parameters:
{fabric.Object} object
  Object to center

Returns:
  {fabric.Element} thisArg

{fabric.Element} clear()
Clears all contexts (background, main, top) of an instance

Returns:
  {fabric.Element} thisArg

{fabric.Element} clearContext(context)
Clears specified context of canvas element

Parameters:
context
  {Object} ctx context to clear

Returns:
  {fabric.Element} thisArg

{fabric.Element} clone(callback)
Clones canvas instance

Parameters:
{Object} callback Optional
  Expects `onBeforeClone` and `onAfterClone` functions

Returns:
  {fabric.Element} Clone of this instance

{Number} complexity()
Returns number representation of an instance complexity

Returns:
  {Number} complexity

{Boolean} containsPoint(e, target)
Applies one implementation of 'point inside polygon' algorithm

Parameters:
e
  { Event } event object
target
  { fabric.Object } object to test against

Returns:
  {Boolean} true if point contains within area of given object

{fabric.Element} deactivateAll()
Deactivates all objects by calling their setActive(false)

Returns:
  {fabric.Element} thisArg

{fabric.Element} deactivateAllWithDispatch()
Deactivates all objects and dispatches appropriate events

Returns:
  {fabric.Element} thisArg

{fabric.Element} dispose()
Clears a canvas element and removes all event handlers.

Returns:
  {fabric.Element} thisArg

findTarget(e, skipGroup)
Method that determines what object we are clicking on

Parameters:
{Event} e
  mouse event
{Boolean} skipGroup
  when true, group is skipped and only objects are traversed through

{fabric.Element} fxCenterObjectH(object, callbacks)
Centers object horizontally with animation.

Parameters:
{fabric.Object} object
  Object to center
{Object} callbacks Optional
  Callbacks object with optional "onComplete" and/or "onChange" properties

Returns:
  {fabric.Element} thisArg

{fabric.Element} fxCenterObjectV(object, callbacks)
Centers object vertically with animation.

Parameters:
{fabric.Object} object
  Object to center
{Object} callbacks Optional
  Callbacks object with optional "onComplete" and/or "onChange" properties

Returns:
  {fabric.Element} thisArg

{fabric.Element} fxRemove(object, callback)
Same as `fabric.Element#remove` but animated

Parameters:
{fabric.Object} object
  Object to remove
{Function} callback
  Callback, invoked on effect completion

Returns:
  {fabric.Element} thisArg

{fabric.Element} fxStraightenObject(object)
Same as `fabric.Element#straightenObject`, but animated

Parameters:
{fabric.Object} object
  Object to straighten

Returns:
  {fabric.Element} thisArg

{fabric.Group} getActiveGroup()
Returns currently active group

Returns:
  {fabric.Group} Current group

{fabric.Object} getActiveObject()
Returns currently active object

Returns:
  {fabric.Object} active object

{Object} getCenter()
Returns coordinates of a center of canvas. Returned value is an object with top and left properties

Returns:
  {Object} object with "top" and "left" number values

{CanvasRenderingContext2D} getContext()
Returns topmost canvas context

Returns:
  {CanvasRenderingContext2D}

{HTMLCanvasElement} getElement()
Returns <canvas> element corresponding to this instance

Returns:
  {HTMLCanvasElement}

{Number} getHeight()
Returns canvas height

Returns:
  {Number}

{Array} getObjects()
Returns an array of objects this instance has

Returns:
  {Array}

{Object} getPointer(e)
Returns pointer coordinates relative to canvas.

Parameters:
e

Returns:
  {Object} object with "x" and "y" number values

{Number} getWidth()
Returns canvas width

Returns:
  {Number}

{fabric.Element} insertAt(object, index)
Inserts an object to canvas at specified index and renders canvas. An object should be an instance of (or inherit from) fabric.Object

Parameters:
object
  {Object} Object to insert
index
  {Number} index to insert object at

Returns:
  {fabric.Element} instance

{Boolean} isEmpty()
Returns true if canvas contains no objects

Returns:
  {Boolean} true if canvas is empty

{fabric.Object} item(index)
Returns object at specified index

Parameters:
{Number} index

Returns:
  {fabric.Object}

{fabric.Element} loadFromDatalessJSON(json, callback)
Populates canvas with data from the specified dataless JSON JSON format must conform to the one of `fabric.Element#toDatalessJSON`

Parameters:
{String} json
  JSON string
{Function} callback
  Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized

Returns:
  {fabric.Element} instance

{fabric.Element} loadFromJSON(json, callback)
Populates canvas with data from the specified JSON JSON format must conform to the one of `fabric.Element#toJSON`

Parameters:
{String} json
  JSON string
{Function} callback
  Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized

Returns:
  {fabric.Element} instance

loadImageFromURL(url, callback)
Loads an image from URL

Parameters:
url
  {String} url of image to load
callback
  {Function} calback, invoked when image is loaded

loadSVGFromURL(url, callback)
Takes url corresponding to an SVG document, and parses it to a set of objects

Parameters:
{String} url
{Function} callback

onBeforeScaleRotate(target)
Callback; invoked right before object is about to be scaled/rotated

Parameters:
{fabric.Object} target
  Object that's about to be scaled/rotated

onFpsUpdate(fps)
Callback; invoked on every redraw of canvas and is being passed a number indicating current fps

Parameters:
{Number} fps

{Object} remove(object)
Removes an object from canvas and returns it

Parameters:
object
  {Object} Object to remove

Returns:
  {Object} removed object

{fabric.Element} removeActiveGroup()
Removes currently active group

Returns:
  {fabric.Element} thisArg

{fabric.Element} removeActiveObject()
Removes currently active object

Returns:
  {fabric.Element} thisArg

{fabric.Element} renderAll(allOnTop)
Renders both the top canvas and the secondary container canvas.

Parameters:
allOnTop
  {Boolean} optional Whether we want to force all images to be rendered on the top canvas

Returns:
  {fabric.Element} instance

{fabric.Element} renderTop()
Method to render only the top canvas. Also used to render the group selection box.

Returns:
  {fabric.Element} thisArg

{fabric.Element} sendBackwards(object)
Moves an object one level down in stack of drawn objects

Parameters:
object
  {fabric.Object} Object to send

Returns:
  {fabric.Element} thisArg

{fabric.Element} sendToBack(object)
Moves an object to the bottom of the stack of drawn objects

Parameters:
object
  {fabric.Object} Object to send to back

Returns:
  {fabric.Element} thisArg

{fabric.Element} setActiveGroup(group)
Sets active group to a speicified one

Parameters:
{fabric.Group} group
  Group to set as a current one

Returns:
  {fabric.Element} thisArg

{fabric.Element} setActiveObject(object)
Sets given object as active

Parameters:
object
  {fabric.Object} Object to set as an active one

Returns:
  {fabric.Element} thisArg

{fabric.Element} setDimensions(dimensions)
Sets dimensions (width, height) of this canvas instance

Parameters:
{Object} dimensions

Returns:
  {fabric.Element} thisArg

{fabric.Element} setHeight(height)
Sets height of this canvas instance

Parameters:
{Number} height
  value to set height to

Returns:
  {fabric.Element} instance

{fabric.Element} setOverlayImage(url, callback)
Sets overlay image for this canvas

Parameters:
{String} url
  url of an image to set background to
{Function} callback
  callback to invoke when image is loaded and set as an overlay one

Returns:
  {fabric.Element} thisArg

{fabric.Element} setWidth(width)
Sets width of this canvas instance

Parameters:
{Number} width
  value to set width to

Returns:
  {fabric.Element} instance

{fabric.Element} straightenObject(object)
Straightens object, then rerenders canvas

Parameters:
{fabric.Object} object
  Object to straighten

Returns:
  {fabric.Element} thisArg

<static> {Boolean | null} fabric.Element.supports(methodName)
Provides a way to check support of some of the canvas methods (either those of HTMLCanvasElement itself, or rendering context)

Parameters:
methodName
  {String} Method to check support for; Could be one of "getImageData" or "toDataURL"

Returns:
  {Boolean | null} `true` if method is supported (or at least exists), `null` if canvas element or context can not be initialized

{String} toDatalessJSON()
Returs dataless JSON representation of canvas

Returns:
  {String} json string

{Object} toDatalessObject()
Returns dataless object representation of canvas

Returns:
  {Object}

{String} toDataURL(format)
Exports canvas element to a dataurl image.

Parameters:
{String} format
  the format of the output image. Either "jpeg" or "png".

Returns:
  {String}

{String} toDataURLWithMultiplier(format, multiplier)
Exports canvas element to a dataurl image (allowing to change image size via multiplier).

Parameters:
{String} format
  (png|jpeg)
{Number} multiplier

Returns:
  {String}

<static> fabric.Element.toGrayscale(canvasEl)
Takes <canvas> element and transforms its data in such way that it becomes grayscale

Parameters:
{HTMLCanvasElement} canvasEl

{String} toJSON()
Returs JSON representation of canvas

Returns:
  {String} json string

{Object} toObject()
Returns object representation of canvas

Returns:
  {Object}

{String} toString()
Returns a string representation of an instance

Returns:
  {String} string representation of an instance

Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 14 2010 21:41:42 GMT-0400 (EDT)