Kind: global class
Npmpackage:
Is the returned instance of a CanvasElement, which makes up all CanvasShapes and CanvasImages. Never called directly by a user.
Import from ad-canvas
import { CanvasElement } from 'ad-canvas'
Properties available to every CanvasElement, except where noted::
| id | STRING representing the name of the element |
| x | NUMBER representing the horizontal position of the element |
| y | NUMBER representing the vertical position of the element |
| rotation | NUMBER representing the rotation, in degrees, of the element |
| alpha | NUMBER representing the opacity of the element |
| scale | NUMBER representing the scale of the element. Will compound with but not change values of scaleX or scaleY |
| scaleX | NUMBER representing the horizontal scale of the element |
| scaleY | NUMBER representing the vertical scale of the element |
| blendMode | NUMBER representing the blend or masking style applied to the element |
| visible | BOOLEAN representing whether or not the element should be drawn |
| shadowColor | STRING representing the color of the drop shadow in RGBA format |
| shadowBlur | NUMBER representing the amount of blur on the drop shadow |
| shadowAngle | NUMBER representing the angle, in degrees, of the drop shadow |
| shadowDistance | NUMBER representing the distance of the drop shadow from the element |
| transformOrigin | STRING representing the origin from which to perform scales and rotations. Written as two values in a string with either a '%' or 'px' marker (ie '50% 50%' or '5px 100px') |
The following *ONLY* apply to [CanvasImage](#CanvasImage) instances::
| sourceX | NUMBER representing the horizontal value from which to start drawing data from the source image |
| sourceY | NUMBER representing the vertical value from which to start drawing data from the source image |
| sourceW | NUMBER representing the width value from which to draw data from the source image |
| sourceH | NUMBER representing the height value from which to draw data from the source image |
The following *ONLY* apply to [CanvasText](#CanvasText) instances::
| fontFamily | STRING representing the font name |
| fontSize | NUMBER or STRING (12, '12', '12px', or '12pt') representing the font size |
| lineHeight | NUMBER which determines the line height between lines of text with defined maxWidth values |
| marginLeft | NUMBER representing the X offset of the text |
| marginTop | NUMBER representing the Y offset of the text |
| maxWidth | NUMBER which determines the maximum width of the text field, which is used to create MUTLI-LINE text |
| alignText | STRING or Align constant defining text's horizontal alingment: 'center', 'left', or 'right'. Can also use Align.CENTER, Align.LEFT, or Align.RIGHT. |
The following *ONLY* apply to [CanvasImage](#CanvasImage)s, [CanvasCircle](#CanvasCircle)s, and [CanvasRect](#CanvasRect)s instances::
| width | NUMBER representing the total width or diameter of the element |
| height | NUMBER representing the total height or diameter of the element |
The following *ONLY* apply to [CanvasCircle](#CanvasCircle)s, [CanvasRect](#CanvasRect)s, and [CanvasText](#CanvasText) instances (heretofore referred to as 'shapes')::
| fill | STRING, gradient, or texture representing the color used to fill the shape |
| strokeFill | STRING, gradient, or texture representing the color used to fill the shape's stroke |
| strokeWidth | NUMBER representing the width of the shape's outline |
| strokeJoin | STRING representing how two lines/corners form: 'round', 'bevel', and 'miter' |
| strokePosition | STRING repsenting the position of the shape's stroke, 'outer' or 'center'; there is no 'inner' |
| strokeDashSize | NUMBER representing the length of each segment in a dashed line |
| strokeDashGap | NUMBER representing the gap between each segment in a dashed line |
| strokeDashOffset | NUMBER representing the offset positioning of the dash segments |