Plugin : Canvas

Image

• Click to edit the object's image.

Initial visibility

• Choose whether the object is visible when the layout starts.
• Options : ["Visible","Invisible"]

Hotspot

• Choose the location of the hot spot in the object.
• Options : ["Top-left","Top","Top-right","Left","Center","Right","Bottom-left","Bottom","Bottom-right"]

Canvas

Action:Resize canvas

• Resizes the canvas.
• width ( number ) : canvas width
• height ( number ) : canvas height

Drawing paths

Action:Fill

• Fills the subpaths with the current fill style.
• Fill rule ( Combo ) : The algorithm by which to determine if a point is inside a path or outside a path.
• Options : ["nonzero","evenodd"]

Action:Stroke

• Strokes the subpaths with the current stroke style.

Action:Clip

• Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.
• Fill rule ( Combo ) : The algorithm by which to determine if a point is inside a path or outside a path.
• Options : ["nonzero","evenodd"]

Drawing rectangles

Action:Clear rectangle

• Clear rectangle.
• x ( number ) : The x axis of the coordinate for the rectangle starting point.
• y ( number ) : The y axis of the coordinate for the rectangle starting point.
• width ( number ) : The rectangle's width.
• height ( number ) : The rectangle's height.

Action:Fill rectangle

• Fill rectangle.
• x ( number ) : The x axis of the coordinate for the rectangle starting point.
• y ( number ) : The y axis of the coordinate for the rectangle starting point.
• width ( number ) : The rectangle's width.
• height ( number ) : The rectangle's height.

Action:Stroke rectangle

• Stroke rectangle.
• x ( number ) : The x axis of the coordinate for the rectangle starting point.
• y ( number ) : The y axis of the coordinate for the rectangle starting point.
• width ( number ) : The rectangle's width.
• height ( number ) : The rectangle's height.

Drawing text

Action:Fill text

• Fill text.
• Text ( string ) : The text to render.
• x ( number ) : The x axis of the coordinate for the text starting point.
• y ( number ) : The y axis of the coordinate for the text starting point.

Action:Stroke text

• Stroke text.
• Text ( string ) : The text to render.
• x ( number ) : The x axis of the coordinate for the text starting point.
• y ( number ) : The y axis of the coordinate for the text starting point.

Fill and stroke styles

Action:Set fill color

• Set fill color.
• Color ( string ) : A DOMString parsed as CSS <color> value.

Action:Set stroke color

• Set stroke color.
• Color ( string ) : A DOMString parsed as CSS <color> value.

Line styles

Action:Set line width

• Set line width.
• Width ( number ) : A number specifying the line width in space units. Zero, negative, Infinity and NaN values are ignored.

Action:Set line cap

• How the end points of every line are drawn.
• Cap ( Combo ) : How the end points of every line are drawn.
• Options : ["butt","round","square"]

Action:Set line cap #

• How the end points of every line are drawn.
• Cap ( string ) : How the end points of every line are drawn.

Action:Set line join

• How two connecting segments.
• Join ( Combo ) : How two connecting segments.
• Options : ["bevel","round","miter"]

Action:Set line join #

• How two connecting segments.
• Join ( string ) : How two connecting segments.

Action:Set miter limit

• Set miter limit.
• Value ( number ) : A number specifying the line width in space units. Zero, negative, Infinity and NaN values are ignored.

Load

Action:Load image from URL

• Replace the currently displaying animation frame with an image loaded from a web address or data URI.
• URI ( string ) : Enter the URL on the web, or data URI, of an image to load.
• Size ( Combo ) : Whether to resize the sprite to the size of the loaded image, or stretch it to the current size.
• Options : ["Resize to image size","Keep current size","Scale down if larger than canvas"]

Paste

Action:Erase object

• Erase objects.
• object ( object ) : Object to erase.

Action:Draw object

• Draw objects.
• object ( object ) : Object to erase.
• Compositing ( Combo ) : Choose the compositing of this drawing.
• Options : ["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"]

Action:Draw object #

• Draw objects.
• object ( object ) : Object to erase.
• Compositing ( string ) : Compositing of this drawing.

Paths

Action:Begin path

• Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

Action:Close path

• Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start.

Action:Move to

• Moves the starting point of a new sub-path to the (x, y) coordinates.
• x ( number ) : The x axis of the point.
• y ( number ) : The y axis of the point.

Action:Line to

• Connects the last point in the subpath to the x, y coordinates with a straight line.
• x ( number ) : The x axis of the coordinate for the end of the line.
• y ( number ) : The y axis of the coordinate for the end of the line.

Action:Bezier curve to

• Adds a cubic Bezier curve to the path.
• cp1x ( number ) : The x axis of the coordinate for the first control point.
• cp1y ( number ) : The y axis of the coordinate for first control point.
• cp2x ( number ) : The x axis of the coordinate for the second control point.
• cp2y ( number ) : ThThe y axis of the coordinate for the second control point.
• x ( number ) : The x axis of the coordinate for the end point.
• y ( number ) : The y axis of the coordinate for the end point.

Action:Quadratic curve to

• Adds a quadratic Bézier curve to the current path.
• cpx ( number ) : The x axis of the coordinate for the control point.
• cpy ( number ) : The y axis of the coordinate for the control point.
• x ( number ) : The x axis of the coordinate for the end point.
• y ( number ) : The y axis of the coordinate for the end point.

Action:Arc

• Adds an arc to the path.
• x ( number ) : The x coordinate of the arc's center.
• y ( number ) : The y coordinate of the arc's center.
• radius ( number ) : The arc's radius.
• start angle ( number ) : The angle at which the arc starts, measured clockwise from the positive x axis and expressed in degrees.
• end angle ( number ) : The angle at which the arc ends, measured clockwise from the positive x axis and expressed in degrees.
• Clockwise ( Combo ) : The arc to be drawn counter-clockwise between the two angles
• Options : ["anti-clockwise","clockwise"]

Action:Arc

• Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
• x1 ( number ) : The x axis of the coordinate for the second control point.
• y1 ( number ) : The y axis of the coordinate for the first control point.
• x2 ( number ) : The x axis of the coordinate for the first control point.
• y2 ( number ) : The y axis of the coordinate for the second control point.
• radius ( number ) : The arc's radius.

Action:Fill rectangle

• Creates a path for a rectangle.
• x ( number ) : The x axis of the coordinate for the rectangle starting point.
• y ( number ) : The y axis of the coordinate for the rectangle starting point.
• width ( number ) : The rectangle's width.
• height ( number ) : The rectangle's height.

Script

Action:Eval

• Run code to draw on canvas (ctx).
• Js code ( string ) : Code string for drawing.

Shadows

Action:Set shadow blur

• Set shadow blur.
• Level ( number ) : A float specifying the level of the blurring effect. The default value is 0. Negative, Infinity or NaN values are ignored.

Action:Set shadow color

• Set shadow color.
• Color ( string ) : A DOMString parsed as CSS <color> value.

Action:Set shadow offsetX

• Set shadow offsetX.
• Offset ( number ) : A float specifying the distance that the shadow will be offset in horizontal distance. The default value is 0. Infinity or NaN values are ignored.

Action:Set shadow offsetY

• Set shadow offsetY.
• Offset ( number ) : A float specifying the distance that the shadow will be offset in vertical distance. The default value is 0. Infinity or NaN values are ignored.

Text styles

Action:Set font

• Set font.
• Font ( string ) : A DOMString parsed as CSS font value.

Action:Set text align

• Specifies the current text alignment being used when drawing text.
• Align ( Combo ) : Specifies the current text alignment being used when drawing text.
• Options : ["left","right","center","start","end"]

Action:Set text align #

• Specifies the current text alignment being used when drawing text.
• Align ( string ) : Specifies the current text alignment being used when drawing text.

Action:Set text baseline

• Specifies the current text alignment being used when drawing text.
• Baseline ( Combo ) : Specifies the current text baseline.
• Options : ["top","hanging","middle","alphabetic","ideographic","bottom"]

Action:Set text baseline #

• Specifies the current text alignment being used when drawing text.
• Baseline ( string ) : Specifies the current text baseline.

Canvas

Expression:CanvasWidth

• Get canvas width.

Expression:CanvasHeight

• Get canvas height.

Drawing text

Expression:TextWidth

• Get text width in current ctx.
• Text ( string ) : The text to render.

canvas

Expression:ImageUrl

• Get the image url from current ctx.

Web

Condition:On image URL loaded

• Triggered after 'Load image from URL' when the image has finished loading.