pixi.js
    Preparing search index...

    Class CanvasTextSystemAdvanced

    System plugin to the renderer to manage canvas text.

    Implements

    Index

    Constructors

    constructor

    Methods

    destroy getTexture renderTextToCanvas returnTexture

    Constructors

    Methods

    • Generic destroy methods to be overridden by the subclass

      Returns void

    • Parameters

      • text: string
      • resolution: number
      • style: TextStyle
      • textKey: string

      Returns Texture

      since 8.0.0

    • This is a function that will create a texture from a text string, style and resolution. Useful if you want to make a texture of your text and use if for various other pixi things!

      Parameters

      • options: CanvasTextOptions

        The options of the text that will be used to generate the texture.

        Constructor options used for Text instances. These options extend TextOptions with canvas-specific features like texture styling.

        • Optionalanchor?: number | PointData

          The anchor point of the text that controls the origin point for positioning and rotation. Can be a number (same value for x/y) or a PointData object.

          • (0,0) is top-left
          • (0.5,0.5) is center
          • (1,1) is bottom-right
          // Set anchor to center
          const text = new Text({
              text: 'Hello Pixi!',
              anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
          });
          // Set anchor to top-left
          const text2 = new Text({
              text: 'Hello Pixi!',
              anchor: { x: 0, y: 0 } // Top-left corner
          });
          // Set anchor to bottom-right
          const text3 = new Text({
              text: 'Hello Pixi!',
              anchor: { x: 1, y: 1 } // Bottom-right corner
          });

          { x: 0, y: 0 }
        • Optionalresolution?: number

          The resolution/device pixel ratio for rendering. Higher values result in sharper text at the cost of performance. Set to null for auto-resolution based on device.

          const text = new Text({
              text: 'Hello Pixi!',
              resolution: 2 // High DPI for sharper text
          });
          const autoResText = new Text({
              text: 'Auto Resolution',
              resolution: null // Use device's pixel ratio
          });

          null
        • OptionalroundPixels?: boolean

          Whether to round the x/y position to whole pixels. Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.

          const text = new Text({
              text: 'Rounded Text',
              roundPixels: true // Rounds position to whole pixels
          });
          @default
        • Optionalstyle?: TextStyle | TextStyleOptions

          The style configuration for the text. Can be a TextStyle instance or a configuration object. Supports canvas text styles, HTML text styles, and bitmap text styles.

          const text = new Text({
              text: 'Styled Text',
              style: {
                  fontSize: 24,
                  fill: 0xff1010, // Red color
                  fontFamily: 'Arial',
                  align: 'center', // Center alignment
                  stroke: { color: '#4a1850', width: 5 }, // Purple stroke
                  dropShadow: {
                      color: '#000000', // Black shadow
                      blur: 4, // Shadow blur
                      distance: 6 // Shadow distance
                  }
              }
          });
          const htmlText = new HTMLText({
              text: 'HTML Styled Text',
              style: {
                  fontSize: '20px',
                  fill: 'blue',
                  fontFamily: 'Verdana',
              }
          });
          const bitmapText = new BitmapText({
              text: 'Bitmap Styled Text',
              style: {
                  fontName: 'Arial',
                  fontSize: 32,
              }
        • Optionaltext?: TextString

          The text content to display. Use '\n' for line breaks. Accepts strings, numbers, or objects with toString() method.

          const text = new Text({
              text: 'Hello Pixi!',
          });
          const multilineText = new Text({
              text: 'Line 1\nLine 2\nLine 3',
          });
          const numberText = new Text({
              text: 12345, // Will be converted to '12345'
          });
          const objectText = new Text({
              text: { toString: () => 'Object Text' }, // Custom toString
          });

          ''
        • Optional AdvancedtextureStyle?: TextureStyleOptions | TextureStyle

          Optional texture style to use for the text texture. This allows fine control over how the text is rendered to a texture before being displayed.

          The texture style can affect:

          • Scale mode (nearest/linear)
          • Resolution
          • Format (rgb/rgba)
          • Alpha handling
          const text = new Text({
              text: 'Crisp Text',
              textureStyle: {
                  scaleMode: 'nearest', // Pixel-perfect scaling
              }
          });

      Returns Texture

      the newly created texture

    • Renders text to its canvas, and updates its texture.

      Returns void

      since 8.10.0

    • Returns a texture that was created wit the above getTexture function. Handy if you are done with a texture and want to return it to the pool.

      Parameters

      • texture: Texture

        The texture to be returned.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods