Canvas Text
Last updated
Last updated
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:
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.
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.
This option allows the Text property to be separated into multiple lines of text using the special "\n" separator.
This section provides the necessary controls for positioning the Canvas Text on top of the underlying Canvas.
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
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.
Rotates the text clockwise in degrees.
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.
Restrict the text to fit within a smaller area of the Canvas.
Add a border to the restricted windowed area. The border will inherit the text color, and will also be affected by the Padding setting.
Set the width and height of the restricted window area, expressed either in Pixels or Relative percentage, depending on the Unit mode set above.
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.
Controls the font size.
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.
On fonts that support it, kerning adjusts the space between certain letter pairs to be more visually pleasing.
On fonts that support it, ligature merges certain character sequences together to be more visually pleasing.
Adds or removes space between characters. Units are 1/1000th of the font size.
Orient the characters to be written either Horizontally or Vertically.
This is useful for languages written typically in rows from left to right, where the rows are organized from top to bottom.
This is useful for languages written typically in columns from from to bottom, where the columns are organized from right to left.
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.
When switched on, this option will adjust the font size to ensure that all text will appear visible within the enclosed area.
Control the color of the text
Adjusts the opacity of the text layer.
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.
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.
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.
Create a shadow effect for the text, similar to Photoshop's shadow effect.
Deform the text using three preset effects - Arch, Bridge, or Bowtie
The deformation amount to be applied to the text.
Set the first and last character in the text to be enlarged or reduced in size by the given Bookend Size.
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!
