Canvas Text
The Canvas Text Operator can be used to create personalized text effects, such as printed team names on a t-shirt:
It can be applied either to Canvas assets, or to uploaded image assets. In both cases it can be treated like a layer of text, similar to Photoshop's text layers. It can be applied several times and renamed, just like any other operator.
The operator comes with the following set of options and properties:
Text Properties
Text
Defines the actual piece of text that will appear on this layer. For personalized text configuration, set this property with a Set Property action in rules.
Note: If the text appears invisible, check the color. You may be displaying black text on top of a black background.
Max Length
This limits the amount of characters displayed by the Text property listed above.
Note: This will not limit the amount of text allowed by the text box on the web front-end. It will only limit the characters displayed by this Canvas Text operator. To limit the text allowed by the front-end you would need to control that separately from the front-end directly, or with custom scripts on the Catalog Item that is embedded on the front-end.
Multi-Line
This option allows the Text property to be separated into multiple lines of text using the special "\n" separator.
Positioning
This section provides the necessary controls for positioning the Canvas Text on top of the underlying Canvas.
Unit
Control the positioning of the text either by using Pixels or in Relative mode by using a Percentage of the width and height of the overall Canvas.
Example: Let's say we want to center the text in the middle of the Canvas.
If the Canvas is 512x512 pixels in size, then using Pixel Unit mode we would have to position the Canvas Text at 256x256 pixels on the X and Y properties, if the Typography is set to Center and Middle Justification.
If the Canvas gets changed to 1024x1024, then the text will look misaligned. The X and Y will need to be readjusted to 512x512.
This is where the Relative Unit becomes very useful, since it will always place the text in the same relative spot, regardless of the overall pixel dimensions of the Canvas
X & Y
Represents either the pixel or percentage positioning of the text on the canvas, depending on the Unit mode chosen. The 0, 0 position is located at the top-left corner of the canvas.
Rotation
Rotates the text clockwise in degrees.
Padding
This option only takes effect in Windowed Mode, Auto Downsize, and Justified options. In Windowed mode, the padding percentage is added around the text to make it fit within the given window size.
Here is an example with Justified Text set at a large font size, filling up the whole Canvas horizontally. The padding is set to 0.
Here is the same example with the Padding set to 10%. Notice the extra padding around the text from the full canvas that is used by Justify.
Windowed
Restrict the text to fit within a smaller area of the Canvas.
Border
Add a border to the restricted windowed area. The border will inherit the text color, and will also be affected by the Padding setting.
Width and Height
Set the width and height of the restricted window area, expressed either in Pixels or Relative percentage, depending on the Unit mode set above.
Typography
Font Type
This option allows users to make use of built-in fonts like a default Serif, Sans Serif, or Monospace, in addition to the use of custom uploaded fonts from the Asset library.
Font Size
Controls the font size.
Justification Options
The text can be justified from its X and Y position both horizontally (left, center, or right) and vertically (top, middle, or bottom).
There is also an option to justify the text to fit within the whole Canvas. This will apply the justification depending on the Text Direction property (ie. if the Text Direction is set to Horizontal, then the justification will be applied horizontally only).
Letter spacing takes no effect while Justification is ON.
The Head Space and End Space allow for padding control from the edges of the Canvas.
Kerning
On fonts that support it, kerning adjusts the space between certain letter pairs to be more visually pleasing.
Ligature
On fonts that support it, ligature merges certain character sequences together to be more visually pleasing.
Letter Spacing
Adds or removes space between characters. Units are 1/1000th of the font size.
Text Direction
Orient the characters to be written either Horizontally or Vertically.
Horizontal
This is useful for languages written typically in rows from left to right, where the rows are organized from top to bottom.
Vertical
This is useful for languages written typically in columns from from to bottom, where the columns are organized from right to left.
Fixed Height / Fixed Width
When switched on, this option will adjust the height or width of characters to be expressed as a relative percentage of the overall height or width. The Fixed Height option will show only for the Horizontal text direction.
The Fixed Width option will show only for the Vertical text direction.
Auto Downsize
When switched on, this option will adjust the font size to ensure that all text will appear visible within the enclosed area.
Color
Control the color of the text
Opacity
Adjusts the opacity of the text layer.
Drawing Style
Allows for the option to switch between solid (default) text, and outlines-only text. It works in conjunction with the Color and Outline Width properties. The Outline gets added on the inside of the text, maintaining the original silhouette.
Strokes
This option allows for the addition of either one or two strokes on the outside of the text.
The second stroke will begin where the first one ends.
Effects
The following effects will either deform or add shadows to the given text.
The effects will stack with each other, so multiple effects can be enabled at the same time.
Shadow
Create a shadow effect for the text, similar to Photoshop's shadow effect.
Curve
Deform the text using three preset effects - Arch, Bridge, or Bowtie
Style
Amount
The deformation amount to be applied to the text.
Bookend Effect
Set the first and last character in the text to be enlarged or reduced in size by the given Bookend Size.
Curved Path
This option would normally allow for text to be deformed by a given curve, expressed as a set of point coordinates in the SVG Path property. Unfortunately, this option is currently broken, and does not function as intended.
Please do not use!
Last updated
