Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
2D

2D Canvas

A canvas is an invisible 2D object that fills the bounds of the screen. It is the parent object for any 2D object like images, segmentation, and face effects.

Add a Canvas Object

Add a Canvas component by clicking the Add button [+] > 2D > Canvas in the Hierarchy panel. A Canvas Scalar component is automatically added in the Inspector panel.

You can also manually add a Canvas Scalar component by clicking + Add component > 2D > Canvas Scalar in the Inspector panel.

Canvas Properties

Scale Factor: Scale with the screen size.

Reference Resolution: The set bounds of the canvas.

  • X,Y: The default values are 720 and 1280, respectively. The minimum value is 0 and maximum value is 2048.
Tip
Tip

Do not change the 9:16 ratio for our in-app effect canvas.

Match Mode: Each mode has a purpose depending on the effect you’re trying to create. You are encouraged to play around with these settings. Match Mode will adjust the cavas to fit in the same way it would in your reference resolution. Changing this property will change what method your cavas will use to try to fit into the current device screen.

  • Match Width: Scale your canvas up proportionately until the width of the canvas matches the width of the screen.
  • Match Height: Scale your canvas up proportionately until the height of the canvas matches the height of the screen.
  • Fit: Scale to whichever, height or width, the canvas hits first while maintaining its proportions.
  • Fill Size: Scale your canvas non-uniformly, meaning it may stretch vertically or horizontally to force the canvas size and shape to match the screen resolution.