PixiJS HTMLText with Renderer's Extract

Example of how to use extract with HTMLText

by Matt Karl

HTML

<h1>
 PixiJS HTMLText with Renderer's Extract
</h1>
<script src="https://pixijs.download/v7.x/pixi.min.js"></script>

<h2>
 PixiJS Render:
</h2>
<canvas id="pixi"></canvas>

<h2>
  Output Image:
</h2>

CSS

body { font-family: Helvetica, sans-serif; }
h2 { color: #999 }

JavaScript

const app = new PIXI.Application({
	width: 300,
  height: 100,
  background: '#666',
  view: document.getElementById('pixi'),
});
const underline = new PIXI.HTMLText('Underline', {
	fill: 'white',
  fontSize: 40
});
underline.style.addOverride('text-decoration: underline');
const strike = new PIXI.HTMLText('Strike-Through', {
	fill: 'white',
  fontSize: 40
});
strike.style.addOverride('text-decoration: line-through');
strike.y = 50;

/**
 * Extracting static screens with HTMLText can be a little
 * tricky, there are some gotchas that are good to be aware
 * specifically: HTMLText is rendered async which means
 * that we need to wait for it to be available until
 * we can actually extract image/base64/etc.
 */
(async function () {

	// 1. Ensure text is updated (canvas rendered)
	await underline.updateText();
  await strike.updateText();

	// 2. Ensure it's added to the scene graph
	app.stage.addChild(underline, strike);
  
  // 3. Force a render, if you're using a Ticker
  // a tick may not happen in time for extract so
  // calling render one more doesn't hurt to be safe!
  app.render();
  
  // 4. Finally, do your extract operation
  const img = await app.renderer.extract.image();
  document.body.appendChild(img);

})();