PixiJS v5 Line Join and Line Caps

Testing the new lineStyle options cap and lineJoin.

HTML

<script src="https://pixijs.download/dev/pixi-legacy.min.js"></script>
<h1>WebGL</h1>
<canvas id="webgl"></canvas>
<h1>Context2D</h1>
<canvas id="context2d"></canvas>

CSS

body {
  margin: 0;
  padding: 0;
  background: #ccc;
  font-family: 'Arial', sans-serif;
  text-align:center;
}

JavaScript

createExample('webgl', false);
createExample('context2d', true);

function createExample(id, forceCanvas) {
	const app = new PIXI.Application({
    width: 600,
    height: 500,
    backgroundColor: 0xcccccc,
    resolution: devicePixelRatio,
    autoDensity: true,
    autoStart: false,
    view: document.getElementById(id),
    forceCanvas: forceCanvas,
  });

  const openedExample = drawExample(false);
  const closedExample = drawExample(true);
  closedExample.y += 250;

  app.stage.addChild(openedExample, closedExample);
  app.render();
  app.destroy();
}

function drawExample(closed) {
	const container = new PIXI.Container();
  const lines = new PIXI.Graphics();
  const joins = ['miter', 'bevel', 'round'];
  const caps = ['butt', 'square', 'round'];
  
  for (let i = 0; i < 3; i++) {
    lines.lineStyle({
        width: 20,
        color: 0x666666,
        alignment: 0.5,
        alpha: 0.2,
        join: joins[i],
        cap: caps[i],
        miterLimit: 198
      })
      .moveTo(50 + i * 200, 100)
      .lineTo(99 + i * 200, 200)
      .bezierCurveTo(99.75 + i * 200, 200.5, 100.25 + i * 200, 200.5, 101 + i * 200, 200)
      .lineTo(150 + i * 200, 100);
    if (closed) {
      lines.closePath();
    }
  }
  
  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;

  container.addChild(lines, miter, bevel, round);
  return container;
}