diff --git a/docs/guides/components/containers.md b/docs/guides/components/containers.md index ada3ad61a..4e8d665ca 100644 --- a/docs/guides/components/containers.md +++ b/docs/guides/components/containers.md @@ -37,6 +37,10 @@ Think of a pop-up window. It has a frame made of one or more Sprites, then has ```ts // Create the application helper and add its render target to the page let app = new Application({ width: 640, height: 360 }); + +// Initialize the application +await app.init({ resizeTo: window }); + document.body.appendChild(app.view); // Create window frame @@ -68,7 +72,9 @@ maskContainer.position.set(4,4); frame.addChild(maskContainer); // Create contents for the masked container -let text = new Text({ +// +// First, create a text texture +let textTexture = app.renderer.canvasText.getTexture({ text:'This text will scroll up and be masked, so you can see how masking works. Lorem ipsum and all that.\n\n' + 'You can put anything in the container and it will be masked!', style:{ @@ -80,6 +86,9 @@ let text = new Text({ x:10 }); +// Then, create a Sprite from the text texture +const text = new Sprite(textTexture); + maskContainer.addChild(text); // Add a ticker callback to scroll the text up and down