Curved text in PIXI

Text is drawn using PIXI.Text, then PIXI.mesh.Rope used on the texture generated, before caching that output for performance reasons on canvas

by Dave Moore

HTML

<script src="https://pixijs.download/v4.5.4/pixi.js"></script>

CSS

margin: 0;
			padding: 0;
			background-color: #000000;

JavaScript

var app = new PIXI.Application();
document.body.appendChild(app.view);

const text = new PIXI.Text("HELLO WORLD, HOW ARE YOU TODAY?", { fontSize: 50, fill: 'white' });
text.updateText();

const radius = 300;
const maxRopePoints = 100;
const step = Math.PI / maxRopePoints;

let ropePoints = maxRopePoints - Math.round( (text.texture.width / (radius * Math.PI)) * maxRopePoints );
ropePoints /= 2;

const points = [];
for ( let i = maxRopePoints - ropePoints; i > ropePoints; i-- ) {
  const x = radius * Math.cos( step * i );
  const y = radius * Math.sin( step * i );
  points.push( new PIXI.Point( x, -y ) );
}

const container = new PIXI.Container();
const rope = new PIXI.mesh.Rope( text.texture, points );
container.addChild( rope );
const bounds = container.getLocalBounds();
const matrix = new PIXI.Matrix();
matrix.tx = -bounds.x;
matrix.ty = -bounds.y;

const renderTexture = PIXI.RenderTexture.create( bounds.width, bounds.height );
app.renderer.render( container, renderTexture, true, matrix, false );
PIXI.BaseTexture.addToCache( renderTexture.baseTexture, 'curvedText' );
PIXI.Texture.addToCache( renderTexture, 'curvedText' );

const sprite = PIXI.Sprite.fromFrame('curvedText');
sprite.position.set(50, 100);
app.stage.addChild( sprite );

container.destroy( true );
text.destroy( true );