PixiJS v5 Line Join

Testing out lineJoin pull-request.

by ShukantPal

HTML

<script src="https://pixijs.download/dev-graphics/pixi.js"></script>

JavaScript

const app = new PIXI.Application({
  width: 600,
  height: 250,
  backgroundColor: 0xcccccc,
  resolution: 2,
  autoDensity: true
});

document.body.appendChild(app.view);

const lines = new PIXI.Graphics()
  .lineStyle({
    width: 20,
    color: 0x666666,
    alignment: 0.5,
    alpha: 0.5,
    join: 'miter',
    miterLimit: 198
  })
  .moveTo(50, 100)
  .lineTo(100, 200)
  .lineTo(150, 100)
  .lineStyle({
    width: 20,
    color: 0x666666,
    alignment: 0.5,
    alpha: 0.5,
    join: 'bevel',
    cap: 'square',
    miterLimit: 198
  })
  .moveTo(250, 100)
  .lineTo(300, 200)
  .lineTo(350, 100)
  .lineStyle({
    width: 20,
    color: 0x666666,
    alignment: 0.5,
    alpha: 0.5,
    cap: 'round',
    join: 'round',
    miterLimit: 200
  })
  .moveTo(450, 100)
  .lineTo(500, 200)
  .lineTo(550, 100);

const style = new PIXI.TextStyle({
  fill: 0x666666,
  fontWeight: 'bold'
})
const miter = new PIXI.Text('miter', style);
miter.anchor.set(0.5);
miter.position.set(100, 50);
miter.roundPixels = true;

const bevel = new PIXI.Text('bevel', style);
bevel.anchor.set(0.5);
bevel.position.set(300, 50);
bevel.roundPixels = true;

const round = new PIXI.Text('round', style);
round.anchor.set(0.5);
round.position.set(500, 50);
round.roundPixels = true;

app.stage.addChild(lines, miter, bevel, round);