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

2D Canvas

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

Add Canvas component

Add the Canvas Scaler component by clicking + Add component > 2D > Canvas Scaler.

Canvas properties

  • Scale Factor: Scale with screen size
  • Reference Resolution: The set bounds of the canvas. X Y (default: 720,1280) ( minimum number 0, maximum number 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. Be sure to play around with these settings on your own. Match Mode will adjust the canvas to fit in the same way it would in your reference resolution. Changing the Match Mode will change what method your canvas will use to try to fit into the current device’s screen.
    • Match Width: If set to Match Width, it will scale your canvas up proportionately until the width of the canvas matches the width of the screen.
    • Match Height: If set to Match Height, it will scale your canvas up proportionately until the height of the canvas matches the height of the screen.
    • Fit: If set to Fit, it will scale to whichever (height or width) the canvas hits first while maintaining its proportions.
    • Fill size: This property will scale your canvas non-uniformly, meaning it may stretch vertically or horizontally to force the canvas size and shape to match the screen resolution.